如何选择一个Reactjs组件模板中使用的所有子组件（不是DOM元素）？

Question

我遇到的情况是，我将两个要素捆绑在一起，而一个董事会以不可商议的方式始终由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组件数组，以便我可以直接指示这些组件执行操作吗？如果是这样，怎么办？

Answer 1

如果您需要这样做（可能不需要），则需要使用引用。

function refsToArray(ctx, prefix){
  var results = [];
  for (var i=0;;i++){
    var ref = ctx.refs[prefix + '-' + String(i)];
    if (ref) results.push(ref);
    else return results;
  }
}

var BoardLayout = React.createClass({
  var makeRef = function(){ return 'BoardPanel-'+(_refi++); }, _refi=0;
  render: function() {
    <div>
      <h1>{this.props.label{</h1>
      <div ref="panels">
        <BoardPanel ref={makeRef()} />
        <BoardPanel ref={makeRef()} />
        <BoardPanel ref={makeRef()} />
        <BoardPanel ref={makeRef()} />
      </div>
    </div>
  }
});

然后，您将refsToArray(this, 'BoardPanel')获得一组引用。

但是，就像我说的那样，可能有更好的解决方案，但是您没有指出您实际上在尝试做什么。