使用 React.clone 元素与不使用它来应用道具

Question

我看到了一个代码片段，上面写着：

<OmniCarousel settings={sliderSettings}>
        {React.Children.map(children, (child, index) => <div key={`dashboardBanner_${index}`}>{child}</div>)}
      </OmniCarousel>

但我想知道为什么不写成：

<OmniCarousel settings={sliderSettings}>
            {React.Children.map(children, (child, index) => React.cloneElement(child,<div key={`dashboardBanner_${index}`}>{child}</div>)}

代码在两种方式下都可以很好地编译。有人回答这个吗？

Answer 1

它们几乎相同，只是参考文献不同。如果你想将 ref 传递给 child 你可以使用 React.cloneElement.

文档：https://reactjs.org/docs/react-api.html#cloneelement

使用 React.clone 元素与不使用它来应用道具

Using React.clone element vs not using it for applying a prop

children

element

reactjs

clone-element