[解決済み] TypeScriptでReactのステートレス機能コンポーネントを使用して子供を使用する方法？

質問

ReactでTypeScriptを使用する場合、もはや React.Props を拡張する必要はありません。

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>
  );
};

コンパイルエラーを出す。

Error:(102, 17) TS2339: Property 'children' does not exist on type 'MyProps'に存在しません。

これは、バニラ関数が与えられることをコンパイラが知る方法が本当にないからだと思います。 children を引数に与えることをコンパイラが知る方法がないからでしょう。

そこで問題は、TypeScriptのステートレスな関数型コンポーネントで、どのようにchildrenを使うべきかということです。

古い方法である 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 (Older)以前。

とりあえずは React.StatelessComponent<> のような型になります。

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

そこで追加したのは、コンポーネントの戻り値の型を React.StatelessComponent 型にしたことです。

独自のカスタムプロップスを持つコンポーネントの場合 ( MyProps インターフェース)。

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

今すぐ props は children のプロパティと同様に MyProps インターフェイスのものです。

typescript version 2.0.7で確認しました。

さらに React.SFC の代わりに React.StatelessComponent に変更しました。