Edited at

TypeScript & Stateless Component でchildrenプロパティを扱う

More than 1 year has passed since last update.


目的

TypeScript + React + JSXを利用している開発環境で

Stateless Component(React.Componentを継承しないコンポーネント)内で

childrenプロパティを利用する


問題

以下のソースでchildrenプロパティを利用しようとするとエラーが発生する。

import React from 'react';

// Stateless Component
const MyStatelessComponent = ({ children }) => <div>{children}</div>; // (1)

// 親コンポーネント
class MyApp extends React.Component<{}, {}> {
render() {
return (
<MyStatelessComponent> //
Learn Javascript // (2)
</MyStatelessComponent> //
)
}
}

エラー内容は次の通り


Error TS2324: Property 'children' is missing in type 'IntrinsicAttributes


MyStatelessComponentにchildrenプロパティを設定する必要があるよう。

しかし、今回は通常のReact.Componentを継承したコンポーネントと同様に

(2)の方法で記述を行いたい。


エラー回避策

(1)の部分で、childrenのデフォルト値を設定する

const MyStatelessComponent = ({children = null}) => <div>{children}</div>;

上記のようにすることでエラーは発生しなくなった。


  • 2016/11/14 追記

いただいたコメントにより、

const MyStatelessComponent: React.StatelessComponent<React.Props<{}>>

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

と、Reactが提供するStatelessComponentインタフェースを実装することで、問題が解決できることがわかりました。

children以外のプロパティを追加する場合は、React.Propsを継承したクラスを作ることで対応できます。

ご指摘ありがとうございました。


参考