[英]React functional component - how do I pass refs back to parent when component returns an array of elements?
I have a React component that includes a stateless functional component. 我有一个React组件,其中包括一个无状态功能组件。 The inner component runs Lodash
map
on an array of values to return an array of p
tags. 内部组件在值数组上运行Lodash
map
,以返回p
标签数组。
class Application extends React.Component {
items = [
'first',
'second',
'third',
];
render() {
return <div>
<Paragraphs items={ this.items } />
</div>;
}
}
const renderItem = ( item, index ) => {
return (
<p key={ index }>{ item }</p>
);
};
const Paragraphs = ( { items } ) => _.map( items, renderItem );
ReactDOM.render(<Application />, document.getElementById('root'));
My Application
component needs references to these DOM elements, so I'd like to pass back a ref for each of the p
tags back to the parent component. 我的
Application
组件需要对这些DOM元素的引用,因此我想将每个p
标签的ref返回给父组件。 Can anyone suggest the best way to do this? 谁能建议最好的方法吗? All the examples I've found assume the child component is a single element.
我发现的所有示例都假定子组件是单个元素。
Now in React 16.3 you can create refs with React.createRef() and pass them from parent component to child. 现在在React 16.3中,您可以使用React.createRef()创建引用,并将它们从父组件传递给子组件。 Here is the docs.
这是文档。 So you can map items in the parent component and extend them with ref property.
因此,您可以映射父组件中的项目,并使用ref属性对其进行扩展。
I hope this will work for you. 希望这对您有用。
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'));
for starters, you may want to read in here - 对于初学者,您可能想在这里阅读-
And then, if you have grasped the concept of references in react, I have done, some very simple changes( see below ) to the JS file from your codepen's pen. 然后,如果您掌握了react中引用的概念,那么我已经完成了对Codepen笔对JS文件所做的一些非常简单的更改(请参见下文)。
I am pasting the new pen, with needed specs here - https://codepen.io/anon/pen/wjKvvw 我正在粘贴新笔,并在此处添加所需的规格-https: //codepen.io/anon/pen/wjKvvw
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'));
Go through the code, if you have any questions, let me know :) 查看代码,如果您有任何疑问,请告诉我:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.