React.VFCとReact.FCの違い

React.FCはchildrenを持っている。

実装

VFC

export const Vfc: React.VFC = () => {
  return (
    <div>aaa</div>
  );
};

FC

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

呼び出し元

import { Vfc } from './components/Vfc';
import { Fc } from './components/Fc';

export const App: React.VFC = () => {

  return (
    <div className="p-8">
      <Vfc />
      <Fc>test</Fc>
    </div>
    
  );
};

childrenはタグの中身っぽくなってる。 propsにコンポーネントをまるまる渡すのが面倒なときはこっちのほうが入れ子でかけるからいいかもしれない。