reactjs - 转发多个 ref 以 react child

Question

我看过一些关于forwardRef的文章，但是无法找到具有特定方法的示例，基本上当我们处理 children props 时React，我们需要转发多个 ref对此children props .

我会举个例子来澄清任何疑问。

让图像我们有一个父组件List ，看起来像这样:

const List = ({  children }) => (
  <div>
   {children}
  </div>
);

我们有它的子组件 Tab :

const Tab = ({ children }) => (
  <div>
    {children}
  </div>
);

它们被这样使用:

<List>
 <Tab />
 <Tab />
 <Tab />
</List>

因此我的问题是，我如何能够创建多个 refs在 List , 能够将它们转发到 Tab , 在每个 Tab 处正确设置它们，他们最终在 List 获得了它的引用一起工作。

如果还有任何疑问，我很乐意澄清。

Answer 1

我猜你可以使用 React.cloneElement 之类的东西并将引用作为 Prop 传递给 children 。

{React.Children.map(children, childElement =>
    React.cloneElement(childElement)
)}