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

等...

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

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

React支持可以附加到任何属性的特殊属性零件。 ref属性采用回调函数，而安装组件后将立即执行回调或未安装。

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

当然在你的情况下，因为你自己定义了Child组件，它实际上并不是一个标准的html DOM元素，所以callback参数实际上是你的Child组件对象的挂载实例。

然后使用：

访问已安装的组件实例

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

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

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

1 个答案: