IT技术 - 如何选择 Reactjs 组件模板中使用的所有子组件（不是 DOM 元素）？ - 吾爱随笔录

我有一种情况，我有两个联系在一起的元素，一个不可协商的董事会总是由 4 个细分面板组成：

var BoardPanel = React.createClass({
  getInitialState: function() {
    return { someval: '' };
  }, 
  render: function() {
    <div>{this.state.someval}</div>
  },
  doSomething: function(v) {
    setState({ someval: v });
  }
});

var BoardLayout = React.createClass({
  render: function() {
    <div>
      <h1>{this.props.label{</h1>
      <div ref="panels">
        <BoardPanel />
        <BoardPanel />
        <BoardPanel />
        <BoardPanel />
      </div>
    </div>
  }
});

BoardLayout 应该能够统一告诉每个 BoardPanel 调用面板 API 函数，所以我想做的 React.js 相当于：

this.querySelectorAll("BoardPanel")
    .array()
    .forEach(function(panel, idx) {
       panel.doSomething(idx);
    });

请注意，我明确表示不希望在这里访问DOM节点，我要访问的阵营定义的虚拟元素，对通话功能，并且永远不会触及任何真正的浏览器的DOM使用。

我查看了 React.children 实用程序函数，但这些功能相当无用，因为无法指定我想要哪些孩子，并且this.props.children将给我两个div元素，因为这些BoardPanel元素“深入”在模板中。

（我也很反对ref="..."为每个 BoardPanel添加一次性标识符，因为没有必要这样做，因为这是格式良好的结构化标记。这是一种可能的解决方法，但似乎与拍打一样明智HTML 文件中每个元素的 id，而不是依赖于查询选择器）

我可以通过实际上根本不将它们放在模板中并使用React.create(BoardPanel)in添加它们来动态生成它们，BoardLayout.getInitialState但这会将立即有见地的模板结构变成不透明的占位符，这也是我不想做的事情。

我能否BoardLayout.componentDidMount以某种方式获取所BoardPanel使用的组件数组，以便我可以直接指示这些组件执行操作？如果是这样，如何？