React.Children.count返回0问题：为何预期为5却得到0？

嘿，我来帮你揪出问题所在～

核心误解在这里：你混淆了组件内部渲染的元素和组件接收的props.children。

问题根源 #

React.Children.count(this.props.children)统计的是父组件传递给当前组件的子元素数量，而不是当前组件自己render方法里写的元素数量。

看你的代码：

ReactDOM.render(<Express />, document.getElementById("root"));

你渲染<Express />时，没有给它传递任何子节点，所以this.props.children是空的（或者说undefined），React.Children.count()自然返回0。而你预期的5个元素，是<Express>组件自己render里定义的内部内容，不属于props.children的范畴。

解决方案 #

根据你的需求，有两种方式可以得到预期的5：

方案1：把元素作为外部子节点传递给Express

修改渲染逻辑，把那5个元素放到<Express>标签内部作为子元素，然后在Express的render里渲染this.props.children：

class Author extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        {this.props.Name} {this.props.Surname}
      </div>
    )
  }
}
class Express extends React.Component {
  constructor(props) {
    super(props);
    this.doClick = this.doClick.bind(this);
  }
  doClick() {
    alert(React.Children.count(this.props.children)); // 现在会返回5
  }
  render() {
    return (
      <div onClick={this.doClick}>
        {this.props.children}
      </div>
    );
  }
}
ReactDOM.render(
  <Express>
    <div>Science</div>
    <Author Name="Mario" Surname="Puzzo"/>
    <Author Name="Maria" Surname="Devita"/>
    <div>Literature</div>
    <div>History</div>
  </Express>, 
  document.getElementById("root")
);

方案2：统计组件内部的元素数组长度

如果这些元素本来就是Express组件的内部内容，不想从外部传递，那可以把它们存到一个数组里，直接统计数组长度：

class Author extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        {this.props.Name} {this.props.Surname}
      </div>
    )
  }
}
class Express extends React.Component {
  constructor(props) {
    super(props);
    this.doClick = this.doClick.bind(this);
    // 将内部元素存入数组
    this.internalContent = [
      <div>Science</div>,
      <Author Name="Mario" Surname="Puzzo"/>,
      <Author Name="Maria" Surname="Devita"/>,
      <div>Literature</div>,
      <div>History</div>
    ];
  }
  doClick() {
    alert(this.internalContent.length); // 返回5
  }
  render() {
    return (
      <div onClick={this.doClick}>
        {this.internalContent}
      </div>
    );
  }
}
ReactDOM.render(<Express />, document.getElementById("root"));

总结 #

React.Children工具类是专门用来处理组件接收的外部子元素的，如果你要统计组件自己内部定义的元素数量，直接用数组长度就好啦～

内容的提问来源于stack exchange，提问作者lyborko