Question

我有反应组件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>

Answer 1

所以我明白了。我为每个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
  }
}

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

访问React组件的所有子组件

2 个答案: