如何检查有多少React孩子有一定的道具？

Question

我有两种类型的组件.我们称之为外在和内在.想象一下这样的事情:

<Outer>
    <h4>{this.prop.title} ({this.state.withX}/{this.state.total})</h4>
    <Inner isX/>
    <Inner isX/>
    <Inner/>
    <Inner/>
</Outer>

我有这个功能:

getInitialState: function() {
    return {
        total: React.Children.count(this.props.children),
        withX: /// ??? ///
    };
}

我如何获得这个价值？我试图得到这样的东西:

withX: function() {
    var counter = React.Children.forEach(this.props.children, function(child) {
         // if...
         return //something
    });
return counter;
}

但是......我觉得它会让我无处可去.

Answer 1

React现在有React.Children.count(children)这里记录的方法https://facebook.github.io/react/docs/react-api.html#react.children.count

更新:经过反思,我不确定这实际上是否回答了这个问题,但无论如何都会离开这里,因为人们已经投了票.

Answer 2

当您遍历孩子时,您可以检查他们的道具.例如,使用forEach上面提到的方法,您可以执行以下操作:

withX: function() {
  var counter = 0;
  React.Children.forEach(this.props.children, function(child) {
    if (child.props.isX) counter++;
  });
  return counter;
}

React还提供了一个toArray帮助程序,允许您使用JS提供的nice数组方法执行相同的操作:

return React.Children.toArray(this.props.children).filter(function(child) {
  return child.props.isX;
}).length;

如果您正在使用ES6,可以使用箭头功能非常简洁地执行此操作:

return React.Children.toArray(this.props.children).filter(c => c.props.isX).length;

唯一的问题是,如果Outer正在进行计数,那么Outer还需要渲染h4.这是一个完整的例子:

const App = React.createClass({
  render() {
    return (
      <Outer title="Things">
        <Inner isX/>
        <Inner isX/>
        <Inner/>
        <Inner/>
      </Outer>
    );
  }
});

const Outer = React.createClass({
  getInitialState() {
    return {
      total: React.Children.count(this.props.children),
      withX: this.countChildrenWithX(this.props.children)
    };
  },

  countChildrenWithX(children) {
    const { toArray } = React.Children;
    return toArray(children).filter(c => c.props.isX).length;
  },

  render() {
    return (
      <div>
        <h4>{this.props.title} ({this.state.withX}/{this.state.total})</h4>
        <hr />
        {this.props.children}
      </div>
    );
  }
});

const Inner = React.createClass({
  render() {
    return <div>Inner - withX = {String(!!this.props.isX)}</div>;
  }
});

而这里的工作JS斌证实:https://jsbin.com/xameyun/edit?js,output