访问React组件的所有子组件

Question

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

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

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

<A>some markup</A>

Answer 1

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

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
  }
}

Answer 2

const childrenProps = React.Children.map(this.props.children,
 (child) => React.cloneElement(child, {
    data : this.state,
    method : this.method.bind(this)
   // here you can pass state or method of parent component to child components
 }));

  // to access you can use this.props.data or this.props.method in child component

您需要传递包含所有子组件的{childrenProps}。