reactjs - 如何使用 this.refs 作为子组件列表

Question

这个问题已经有答案了:

How to assign refs to multiple components (4 个回答)

已关闭 5 年前。

我有一个列表 <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

等等...

但请注意，这被视为旧版 API，您不应再使用它。
更好的方法是

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

React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

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

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

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

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

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