TypeScriptでReactステートレス関数型コンポーネントで子を使用する方法は？

TypeScriptをReactで使用React.Propsすると、コンパイラがすべてのReactコンポーネントの小道具に子を含めることができることを認識するために拡張する必要がなくなります。

interface MyProps { }

class MyComponent extends React.Component<MyProps, {}> {
  public render(): JSX.Element {
    return <div>{this.props.children}</div>;
  }
}

ただし、ステートレス機能コンポーネントの場合はそうではないようです。

const MyStatelessComponent = (props: MyProps) => {
  return (
    <div>{props.children}</div>
  );
};

コンパイルエラーを発行します：

エラー：（102、17）TS2339：プロパティ「children」はタイプ「MyProps」に存在しません。

これは、バニラ関数がchildrenprops引数で指定されることをコンパイラーが知る方法が実際にはないためだと思います。

では、問題は、TypeScriptのステートレス関数型コンポーネントで子をどのように使用する必要があるかということです。

以前の方法に戻ることもできますMyProps extends React.Propsが、Propsインターフェイスは非推奨としてマークされており、ステートレスコンポーネントはProps.ref、私が理解しているように、を持っていないか、サポートしていません。

したがって、children小道具を手動で定義できます。

interface MyProps {
  children?: React.ReactNode;
}

まず：ReactNode正しいタイプですか？

2番目：子をオプション（?）として記述する必要があります。そうしないと、コンシューマーはそれchildrenがコンポーネント（）の属性であると考え<MyStatelessComponent children={} />られ、値が指定されていない場合はエラーが発生します。

何かが足りないようです。私の最後の例がReactの子でステートレス機能コンポーネントを使用する方法であるかどうかについて誰かが明確にすることができますか？

React 16.8アップデート： React 16.8以降、名前React.SFCとReact.StatelessComponentは非推奨になりました。実際、それらはReact.FunctionComponentタイプまたはReact.FC略してエイリアスになっています。

ただし、同じように使用します。

const MyStatelessComponent : React.FunctionComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

React 16.8（古い）の前：

今のところ、次のようにReact.StatelessComponent<>タイプを使用できます。

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <div>{props.children}</div>

私が追加したのは、コンポーネントの戻り値の型をtypeに設定することReact.StatelessComponentです。

独自のカスタム小道具（MyPropsインターフェースなど）を備えたコンポーネントの場合：

const MyStatelessComponent : React.StatelessComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

これでprops、childrenプロパティとMyPropsインターフェイスからのプロパティが取得されました。

typescriptバージョン2.0.7でこれをチェックしました

さらに、簡潔にするためにReact.SFC代わりに使用できますReact.StatelessComponent。

React.PropsWithChildren<P>小道具にはタイプを使用できます。

interface MyProps { }

function MyComponent(props: React.PropsWithChildren<MyProps>) {
  return <div>{props.children}</div>;
}

使用できます

interface YourProps { }
const yourComponent: React.SFC<YourProps> = props => {}

より簡単な答え：使用ReactNode：

interface MyProps {
  children?: React.ReactNode
}

場合children（つまり持つオプションのかそうでない?かではない）コンポーネントに依存します。これ?はそれを表現するための最も簡潔な方法なので、何も問題はありません。

歴史について：最初に尋ねられたとき、これは必ずしも正しい答えではありませんでした：タイプReactNodeはこのプルリクエストによってのみ2017年3月に（ほぼ）現在の形式で追加されましたが、今日これを読んでいるほとんどの人はReactの十分に現代的なバージョンを使用しているはずです。

最後に、children「属性」として渡すことについて（Reactの用語では、属性ではなく「prop」として渡すことになります）：可能ですが、ほとんどの場合、JSXの子を渡すと読みやすくなります。

<MyComponent>
  <p>This is part of the children.</p>
</MyComponent>

読むよりも簡単

<MyComponent children={<p>This is part of the children.</p>} />