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

Posted 2023-03-05

【中文标题】React 功能组件 - 当组件返回元素数组时，如何将 refs 传递回父级？

【英文标题】：React functional component - how do I pass refs back to parent when component returns an array of elements?

【发布时间】：2018-10-01 22:40:12

【问题描述】：

我有一个包含无状态功能组件的 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

【问题讨论】：

你读过文档吗？ reactjs.org/docs/…

我做到了，谢谢。我的问题更多与处理元素数组有关。

【参考方案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'));

【讨论】：

哇，漂亮的解决方案 Vitaliy，谢谢！如果对其他人有用，React.createRef 需要 React 16.3。一些杂散的空格也潜入了您的标签，例如< /p>，我在尝试此操作时将其删除。对我有用吗！

谢谢。没注意到。自动格式化期间代码被破坏。

【参考方案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'));

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

【讨论】：

谢谢 H S，我选择了 Vitaliy 的方法，因为它非常简洁。

嗨。您选择的方法是现代的（在反应版本的上下文中），我根据您之前创建的笔给出了解决方案。在那支笔中，react 的版本没有 createRef api，所以我创建了这个版本。当然，两者都是正确的解决方案。 :)

我明白了！感谢您的信息。