在react组件中仅允许特定类型的子级

Question

我有一个Card组件和一个CardGroup组件，当CardGroup有一个子组件不是Card组件时，我想抛出一个错误。这是可能的，还是我试图解决错误的问题？

Answer 1

您可以使用自定义proxType函数来验证子级，因为子级只是道具。我还为此写了一篇文章，如果你想要更多的细节。

var CardGroup = React.createClass({
  propTypes: {
    children: function (props, propName, componentName) {
      var error;
      var prop = props[propName];

      React.Children.forEach(prop, function (child) {
        if (child.type.displayName !== 'Card') {
          error = new Error(
            '`' + componentName + '` only accepts children of type `Card`.'
          );
        }
      });

      return error;
    }
  },

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

Answer 2

您可以使用displayName为每个孩子，通过类型访问：

for (child in this.props.children){
  if (this.props.children[child].type.displayName != 'Card'){
    console.log("Warning CardGroup has children that aren't Card components");
  }  
}

Answer 3

对于React 0.14和使用ES6类，解决方案如下所示：

class CardGroup extends Component {
  render() {
    return (
      <div>{this.props.children}</div>
    )
  }
}
CardGroup.propTypes = {
  children: function (props, propName, componentName) {
    const prop = props[propName]

    let error = null
    React.Children.forEach(prop, function (child) {
      if (child.type !== Card) {
        error = new Error('`' + componentName + '` children should be of type `Card`.');
      }
    })
    return error
  }
}