Question

如果我们在反应中使用数组映射，我们如何调用子函数？我通过使用refs在google上找到了一种方法，但它不会调用实际的组件而不是它注册的最后一个组件。

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启发他的解决方案并避免使用裁判如果有人想使用它，我想出了一个解决方案。

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

因为您要为所有Child组件指定相同的ref（ref名称），所以和循环的结尾，ref将具有最后一个Child组件的引用。

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

像这样：

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

现在使用：

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

访问特定的子元素。

建议，根据 DOC ：

如果您之前使用过React，那么您可能熟悉旧版本其中ref属性是字符串的API，例如＆＃34; textInput＆＃34;和DOM 节点作为this.refs.textInput访问。我们建议反对它，因为字符串引用有一些问题，被认为是遗留的，很可能在将来的一个版本中删除。如果您目前正在使用 this.refs.textInput访问refs，我们建议使用回调模式代替。

因此使用ref回调方法而不是字符串引用。

像这样：

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

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

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

数组映射反应组件调用子函数

1 个答案: