☰

ReactJs: this.props.children の PropTypes はどうすべきですか? 質問する

tag-icon • tag-icon reactjs jsx react-proptypes
ReactJs: this.props.children の PropTypes はどうすべきですか? 質問する

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

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

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

export default ContainerComponent;

質問: children プロパティの propType は何にすべきでしょうか?

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

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

警告: 失敗したプロパティ タイプ:に指定されたchildrenタイプの無効なプロパティ。が必要です。arrayContainerComponentobject

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

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

警告: 失敗したプロパティ タイプ: ContainerComponent に指定されたタイプ オブジェクトの無効なプロパティの子。配列が必要です。

アドバイスをお願いします。子要素の propTypes チェックを行わなくてもよいのでしょうか?

ベストアンサー1

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,
}

おすすめ記事