reactjs - 在 React 函數式組件中使用 TypeScript 進行檢查

我正在一個 React 應用程式（next.js）中開始使用 TypeScript，但我不確定如何給 React 組件加上類型。

我有一個組件像…

type Props = {
  children: JSX.Element;
};

export default function SiteLayout({ children }: Props): React.FC {
return (
  <div>
    {children}
  </div>
)

但這給了我以下錯誤：

var children: JSX.Element
類型 'Element' 無法指定給類型 'FC<{}>'。
類型 'Element' 與簽名 '(props: { children?: ReactNode; }, context?: any): ReactElement' 不匹配。ts(2322)

我也試著僅使用 JSX.Element 來讓它運作：

type Props = {
  children: JSX.Element;
};

export default function SiteLayout({ children }: Props): JSX.Element {

return (
  <div>
    {children}
  </div>
)

但這會在子組件中產生以下錯誤。

(別名) 函數 SiteLayout({ children }: Props): JSX.Element import SiteLayout
這個 JSX 標籤的 'children' 屬性預期單一類型為 'Element' 的子元素，但提供了多個子元素.ts(2746)

上述組件正在被 Next.js 頁面組件使用，如下所示：

import Head from 'next/head';
import SiteLayout, { siteTitle } from '../../components/SiteLayout';

export default function myPage() {
  const pageTitle = 'My Page';


  return (
    <SiteLayout>
      <Head>
        <title>{siteTitle + ' - ' + pageTitle}</title>
      </Head>
      <div>
        content...
      </div>
    </SiteLayout>
  );
}

正確的方法是什麼？我對於何時應該使用 JSX.Element 和何時應該使用 React.FC 感到困惑。

答案＃1

這個函數的返回類型不是一個組件，函數本身就是組件。這就是為什麼不是

function SiteLayout({ children }: Props): React.FC { ...

它應該是：

const SiteLayout: React.FC<Props> = ({ children }: Props) => {
    return (
      <div>
        {children}
      </div>
    );
}

關於 children 屬性的類型，如果對子元素的類型（字串、布林值、元素等）沒有任何限制，最好使用 ReactNode：

type Props = {
    children: React.ReactNode
}

定義如下。

答案＃2

你的函數正在返回 React.FC 類型，這不應該是這種情況。函數組件的返回類型是 ReactNode，並且子元素是由 React.FC 類型隱式提供的。如果你明確地為它們指定類型，你可以省略 React.FC 並寫成：

const SiteLayout = ({children}: Props) => {
  return (
    <div>
      {children}
    </div>
  )
}