ReactJS:两个道具并检查propType

时间:2017-03-15 20:04:28

标签: reactjs

情况:

<Component>
    child
</Component>

我想做什么:

<Component>
<div></div>
{this.function()} // loads array of components
</Component>

问题:

我只能指定一个propType?如何将两个不同的propType合二为一个?

谢谢!

1 个答案:

答案 0 :(得分:1)

我相信你要做的事应该没问题。请参阅Meteor react tutorial

中的此代码
renderTasks() {
  return this.getTasks().map((task) => (
    <Task key={task._id} task={task} />
  ));
}

render() {
  return (
    <div className="container">
      <header>
        <h1>Todo List</h1>
      </header>

      <ul>
        {this.renderTasks()}
      </ul>
    </div>
  );
}

您可以轻松地将render()修改为:

render() {
  return (
    <div className="container">
      <header>
        <h1>Todo List</h1>
      </header>

      <ul>
        <Task task={this.props.myTask} />
        {this.renderTasks()}
      </ul>
    </div>
  );
}

修改以回复your comment - 是的,您可以将替代PropType指定为子项。见other answer

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