Javascript React functional component-当组件返回元素数组时，如何将引用传递回父级？

我有一个包含无状态功能组件的React组件。内部组件在值数组上运行Lodash

map

，以返回

p

标记数组

类应用程序扩展React.Component{
项目=[
“第一”，
"第二",，
"三",，
];
render（）{
返回
;
}
}
const renderItem=（项目、索引）=>{
返回(
{item}
);
};
常量段落=（{items}）=>.map（items，renderItem）；
ReactDOM.render（
现在在React 16.3中，您可以使用React.createRef（）创建引用，并将它们从父组件传递给子组件。是文档。
因此，您可以映射父组件中的项，并使用ref属性扩展它们

我希望这对你有用

class Application extends React.Component {

    items = [
        'first',
        'second',
        'third',
    ].map(item => ({ item, ref: React.createRef() }))

    // you can access refs here: this.items[0].ref
    render() {
        return <div>
            <Paragraphs items={this.items} />
        </div>;
    }
}
const renderItem = (item, index) => {
    return (
        <p key={index} ref={item.ref} > {item.item} </p>
    );
};
const Paragraphs = ({ items }) => _.map(items, renderItem);
ReactDOM.render(<Application />, document.getElementById('root'));

类应用程序扩展React.Component{
项目=[
“第一”，
"第二",，
"三",，
].map（item=>（{item，ref:React.createRef（）}））
//您可以在此处访问引用：this.items[0].ref
render（）{
返回
;
}
}
const renderItem=（项目、索引）=>{
返回(
{item.item}
);
};
常量段落=（{items}）=>.map（items，renderItem）；
ReactDOM.render（，document.getElementById（'root'））；
对于初学者，您可能需要在此处阅读-





然后，如果您已经掌握了react中引用的概念，我已经从您的代码笔对JS文件做了一些非常简单的更改（见下文）

我正在粘贴新的钢笔，这里有需要的规格-

类应用程序扩展React.Component{
项目=[
“第一”，
"第二",，
"三",，
];
item_refs=this.items.map（a=>{}）//为引用创建空列表
item_referer=（ele，ind）=>{//要在要进行引用的子级中调用的回调函数
本项目参考[ind]=ele；
console.log（“referenting”，this.items[ind]，ele）//一个简单的日志记录，显示引用已完成。要查看，请打开控制台。
}
//将item_referer函数作为prop（itemReferer）传递给子级
render（）{
返回
;
}
}
const renderItem=（项、索引、引用）=>{
//referetome是引用时要调用的回调函数
返回(
referToMe（el，index）}>{item}
);
};
//将itemReferer道具传递给段落组件并使用它
//给孩子们讲课。
常量段落=（{items，itemReferer}）=>items.map（（item，index）=>{
return renderItem（item、index、itemReferer）//传递以引用单个项
})
ReactDOM.render（，document.getElementById（'root'））；

检查代码，如果您有任何问题，请告诉我：）
您阅读文档了吗？是的，谢谢。我的问题更多地与处理一系列元素有关。哇，非常好的解决方案，谢谢！如果对其他人有用，
React.createRef
需要React 16.3。一些零散的空格也悄悄地进入了你的标签中，比如
，我在试用时删除了它。这把戏是为我做的！谢谢。我没注意到。代码在自动格式化过程中被破坏。谢谢你，我选择Vitaliy的方法，因为它非常简洁。嗨。您选择的方法是现代的（在react版本中），我根据您之前创建的笔给出了解决方案。在那支笔中，react的版本没有createRef api，所以我创建了这个版本。当然，两者都是正确的解决方案我懂了！谢谢你的信息。
class Application extends React.Component {

  items = [
    'first',
    'second',
    'third',
  ];
    item_refs = this.items.map(a=>{}) // making an empty list for references
    item_referer = (ele, ind) => { // a callback function to be called in the children where references are to be made
        this.item_refs[ind] = ele;
        console.log("Referring to", this.items[ind], ele) // a simple logging to show the referencing is done. To see open the console.
    }
    // passing the item_referer function as the prop (itemReferer) to children
  render() {
    return <div>
            <Paragraphs items={ this.items } itemReferer={ this.item_referer }/>
        </div>;
  }

}

const renderItem = ( item, index, referToMe ) => {
    // referToMe is the callback function to be called while referencing
  return (
    <p key={ index } ref={(el)=>referToMe(el, index)} >{ item }</p>
  );
};
// get the itemReferer prop passed to Paragraphs component and use it
// render the children.
const Paragraphs = ( { items, itemReferer } ) => items.map((item, index )=>{
    return renderItem(item, index, itemReferer) // passing to refer to the individual item
})

ReactDOM.render(<Application />, document.getElementById('root'));