如何使用 this.refs 获取子组件列表

Question

我有一个<Child />组件列表，然后我使用一个数组this.state.infos来生成这些子组件。如何使用this.refs来获取特定的子组件？

注意：this.state.infos = ['tom', 'mike', 'julie'];例如。

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      infos: {},
    };
  }

  // ignore logic for this.state.infos
  // ...

  render() {
    return (
        <div>
          {[...this.state.infos].map((info) => {
            return <Child
              ref={info}
            />
          })}
        </div>
    );
  }
}

Answer 1

对于你的方法，只需写

this.refs.tom
this.refs.julia

ETC...

但请注意，这被认为是遗留 API，您不应该再使用它。
更好的方法是

 refsCollection = {};
 render() {
    return (
        <div>
          {[...this.state.infos].map((info) => {
            return <Child
              ref={(instance)=>{this.refsCollection[info] = instance;}
            />
          })}
        </div>
    );
  }

React 支持一个可以附加到任何组件的特殊属性。ref 属性带有一个回调函数，该回调将在组件挂载或卸载后立即执行。

该回调接收子 DOM 元素作为参数，然后您可以将其分配给父组件对象中的属性。在上面的代码中，请注意我们如何将“instance”分配给“this.refsCollection[info]”

当然，在您的例子中，因为您自己定义了 Child 组件，所以它并不是真正的标准 html DOM 元素，因此回调参数实际上是 Child 组件对象的已安装实例。

然后您可以使用以下方法访问已安装的组件实例：

this.refsArray['tom']
this.refsArray['julia']

有关更多信息，请参阅此链接： https ://reactjs.org/docs/refs-and-the-dom.html