ReactJS：两个道具并检查 propType答案

【问题标题】：ReactJS: Two props and checking propTypeReactJS：两个道具并检查 propType
【发布时间】：2017-08-06 18:36:27
【问题描述】：

情况：

<Component>
    child
</Component>

我想做什么：

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

问题：

我只能指定一个 propType？如何让两种不同的 propTypes 合二为一？

谢谢！

【问题讨论】：

你能不能更清楚你想通过什么样的道具？
也许this 对你有帮助？
我正在尝试将 func 类型和节点类型传入一个指定的 prop 位置
@Daltron 你不会传入一个函数类型，你会传入该函数的任何返回值。除非this.function() 返回一个函数。

标签： reactjs

【解决方案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 - 是的，您可以将备用 PropTypes 指定为子项。看到这个other answer：

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

【讨论】：

是的，它有效，但我也想设置 PropTypes。如果我有两种不同类型的道具，我该怎么做？
@Daltron 我已经更新了我的答案 - 是的，你可以有多个 propTypes