1. ホーム
  2. reactjs

[解決済み] ReactJsです。this.props.childrenのPropTypesはどうすればいいのでしょうか?

2022-03-15 20:28:09

質問

子コンポーネントをレンダリングする単純なコンポーネントがあるとする。

class ContainerComponent extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

export default ContainerComponent;

質問です。children propのpropTypeはどうすればいいのでしょうか?

オブジェクトとして設定すると、コンポーネントを複数の子で使用するときに失敗します。

<ContainerComponent>
  <div>1</div>
  <div>2</div>
</ContainerComponent>

警告 プロップタイプに失敗しました。無効なプロップ children タイプの array に供給される。 ContainerComponent 期待される object .

配列として設定した場合、子要素を1つだけ与えると失敗します、つまり。

<ContainerComponent>
  <div>1</div>
</ContainerComponent>

警告 プロップタイプに失敗しました。無効なプロップチルドレンのタイプはオブジェクトです。 コンテナコンポーネントに供給された配列です。

アドバイスお願いします。わざわざ子要素のpropTypesチェックをしないほうがいいのでしょうか?

どのように解決するのですか?

以下のような活用を試してみてください。 oneOfType または PropTypes.node

import PropTypes from 'prop-types'

...

static propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]).isRequired
}

または

static propTypes = {
    children: PropTypes.node.isRequired,
}