转发多个 ref 以做出反应 children

Question

我看过一些关于 forwardRef 的文章，但是找不到具体方法的例子，基本上当我们处理 React 的 children props 和我们需要转发多个 ref 到这个 children props.

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

假设我们有一个 parent 组件 List，它看起来像：

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

我们有它的 children 分量 Tab:

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

他们被这样使用：

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

因此我的问题是，我如何能够在 List 处创建多个 refs，能够将它们转发到 Tab，并在每个 Tab 处正确设置它们=]，他们最终在 List 获得了参考文献。

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

Answer 1

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

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

Answer 2

这是我的当前答案：

const tabReferences = React.useRef<HTMLDivElement>([]);

... 

{React.Children.map(children, (child, index) => {
  return React.cloneElement(child, {
       ref: tabReferences.current[index],
  });
})}

谢谢卢卡斯！

转发多个 ref 以做出反应 children

Forward multiple ref to react children

ref

reactjs

react-forwardref