Question

下面的代码创建了有序和无序列表。虽然代码的其他部分由于无关紧要而未在此处发布

问题：我通过在“导航”组件中调用它将一些属性传递给“List”组件。我通过'List'的propType运行一些验证来验证'List'收到的项目。但是，我注意到验证运行了两次。我无法弄明白为什么？

是因为代码中发生了一些竞争条件。或者，这是React中的错误吗？

var Navigation = React.createClass({
   render: function() {
      return (
         <nav>
            <List type="ol" items={this.props.items} />
         </nav>
      );
   }
});
var List = React.createClass({
   propTypes: {
      type: React.PropTypes.string.isRequired,
      items: React.PropTypes.array.isRequired,
      customProp: function(props, propName, componentName) {
        if (props["type"] !== "ol" && props["type"] !== "ul") {
           return new Error("Incorrect list type provided");
        }
      }
   },
   getInitialState: function() {
      return {
         showList: true,
         listType: this.props.type
      }
   },
   render: function() {
      return (
         <this.state.listType>
            {this.props.items.map(function(item) {
               return <ListItem data={item} />
            })}
         </this.state.listType>
      )
   }
});

React.render(<Navigation items={items} />, document.body);

Answer 1

这是因为React在0.11中引入了描述符此问题仍然存在于v0.12中。下面的链接更多地讨论了这一点。

React Github issue on this

React v0.11 blog on propValidation

Answer 2

您的customProp引用并检查另一个道具：'type'。如果您需要自定义函数，请在要将函数应用到的道具之后放置。

实际上你只需要2个propTypes：type和items。您希望确保提供的类型为“ol”或“ul” 为此，您不需要第3个propType。

将propTypes代码更改为：

propTypes: {
  type: React.PropTypes.oneOf(['ol', 'ul']),
  items: React.PropTypes.array.isRequired
},

然后你不需要你的customProp。然后你的代码应该做你想要的。

React JS'propTypes'验证程序运行两次

2 个答案: