React 功能组件 - 当组件返回元素数组时，如何将 refs 传递回父级？

Question

我有一个包含无状态功能组件的 React 组件。内部组件在值数组上运行 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'));

我的Application 组件需要对这些DOM 元素的引用，所以我想将每个p 标记的引用传回给父组件。谁能建议最好的方法来做到这一点？我发现的所有示例都假设子组件是单个元素。

Codepen example

Answer 1

现在在 React 16.3 中，您可以使用 React.createRef() 创建 ref 并将它们从父组件传递给子组件。 Here 是文档。 因此，您可以映射父组件中的项目并使用 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'));

Answer 2

对于初学者，您可能想在这里阅读 -

• https://reactjs.org/docs/refs-and-the-dom.html
• https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509

然后，如果你掌握了 react 中引用的概念，我已经完成了，从你的 codepen 笔对 JS 文件进行了一些非常简单的更改（见下文）。

我正在粘贴新笔，这里有所需的规格 - 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'));

查看代码，如果有任何问题，请告诉我:)