如何在子组件列表中使用 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>
    );
  }
}

- JasonJL

---

你需要存储所有子组件的引用，这并不是一个好主意。你能解释一下你想要实现什么吗？ - Mayank Shukla

Answer 1

对于您的方法，只需编写：

this.refs.tom
this.refs.julia

但请注意，此API已被视为遗留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

- kng

---

另外，考虑将您正在使用 ref 进行的任何操作移动到子组件内部。这将使您的代码更加模块化。如果您使用 ref 所做的操作需要更新父级中的某些数据/状态，请在子组件上考虑使用回调属性来操作父级中的数据。 - Hammad Akhwand