javascript - 访问React组件的所有子组件

我有反应成分A呈现一张桌子。表中某一列的数据是通过另一个组件B呈现的，因此<B/>是<A/>的子级。每当用户单击页面上的任何位置时，我都希望对<B/>执行一些操作。此点击事件侦听器在A中定义。如何从类<B/>s内部遍历所有A？我的组件结构是这样的：

class A extends React.Component {
   <B/>
   <B/>
   <B/>
   <B/>
};

我遇到了React.Children.forEach，但是当孩子通过this.props.children作为道具传递时，这很有用；即当代码是这样的：

<A>some markup</A>

最佳答案

所以我想通了。我给每个ref一个<B/>，并将其存储在一个数组中：

class A extends React.Component {
  collectRefs = [];
  <B ref={b => {this.collectRefs.push(b)}}/>
  <B ref={b => {this.collectRefs.push(b)}}/>
  <B ref={b => {this.collectRefs.push(b)}}/>

  for(const b of collectRefs) {
    // do stuff
  }
}