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已在https://facebook.github.io/react/docs/react-api.html#react.children.count

中记录了React.Children.count(children)方法

更新：经过反思，我不确定这实际上是否回答了这个问题，但无论如何都会留在这里，因为人们已经投了票。

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 helper，它允许你使用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>;
  }
});

并here's a working JS Bin演示：https://jsbin.com/xameyun/edit?js,output

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

2 个答案: