Help us understand the problem. What is going on with this article?

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

More than 3 years have 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を継承したクラスを作ることで対応できます。
ご指摘ありがとうございました。

参考

r-tamura
最近はWeb技術全般に興味があります。
https://rtam.xyz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away