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

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

Index.jsx

谢谢@Mayank Shukla

从他的解决方案中得到启发，并根据 如果有人想用的话，我已经想出了一个解决办法

Index.jsx

---

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

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

像这样：

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

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

访问特定的子元素

---

建议，根据：

如果您以前与React合作过，您可能会熟悉一位年长的 API，其中ref属性是字符串，如“textInput”，DOM 节点作为this.refs.textInput访问。我们建议不要这样做，因为 字符串引用有一些问题，被认为是遗留的，并且很可能 将在将来的某个版本中删除。如果您当前正在使用 this.refs.textInput要访问refs，建议使用回调模式 相反

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

像这样：

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

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

---

有趣的是，您根据旧的api显示了代码，但写了一条警告，指出应该使用回调（不添加代码）呵呵，您希望我也为此编写代码：P，将这样做：）

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

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

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

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