javascript - array map react 组件调用子函数

Question

如果我们在 React 中使用数组映射，我们如何调用子函数？我找到了一种使用 refs 进行谷歌搜索的方法，但它不会调用实际组件而不是它注册的最后一个组件。

Index.jsx

setActiveChat = (ID) => {
    this.refs.chateditor.activateChat(ID);
}

{
   this.state.users.map((user, index) => <ChatEditor ref="chateditor"/>)
}

ChatEditor.jsx

activateChat = (ID) => {
        alert("Hi i am here!");
}

感谢@Mayank Shukla

从他的解决方案中得到启发，并根据 DOC 避免使用 refs如果有人想使用它，我已经想出了一个解决方案。

Index.jsx

    setActiveChat = (ID) => {
        this[`editor${ID}`](ID);
    }


    {
    this.state.users.map((user, index) => <ChatEditor initChat={edtr =>
     (this[`editor${user.ID}`] = edtr)} />
    }

ChatEditor.jsx

constructor(props) {
        super(props);
        props.initChat(this.activateChat);
    }

activateChat = (ID) => {
        alert('Hey, I m here')
    }

Answer 1

因为您正在为所有子组件分配相同的 ref(引用名称)，所以在循环结束时，ref 将具有最后一个子组件的引用。

解决方案是，为每个子元素使用唯一的 refs 名称，一种实现方法是将元素的索引与 ref 放在一起。

像这样:

this.state.users.map((user, index) => <ChatEditor ref={`chateditor${index}`} />)

现在使用:

this.refs[`chateditor${index}`]     //replace index with 0,1,2...

访问特定的子元素。

---

建议根据 DOC :

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you’re currently using this.refs.textInput to access refs, we recommend the callback pattern instead.

所以使用 ref 回调方法而不是字符串 refs。

像这样:

this.state.users.map((user, index) => 
     <ChatEditor ref={el => (this[`chateditor${index}`] = el)} />)

现在使用它来访问子组件:

this[`chateditor${index}`]          //replace index with 0,1,2...