在 JSX 中使用 React.cloneElement()

Question

我想知道如何在 JSX 中使用 cloneElement 语法。我阅读了文档并尝试了示例，但仍然没有任何线索。

class ABC extends React.Component {
  constructor(props){
    super(props)
}
render() {
  return(
  <div>
    {React.cloneElement()}
  </div>
  )
}
}

Answer 1

根据documentation：

使用 element 作为起始克隆并返回一个新的 React 元素 观点。结果元素将具有原始元素的道具 随着新道具的浅浅融合。新的孩子将取代 现有的孩子。来自原始元素的 key 和 ref 将是 保存。

cloneElement 的一个有效用例是当您希望向父级传递给子级的元素添加一个/多个道具时。您只需映射所有子级并通过添加新道具来克隆它们。

return (
  <div style={styles}>
    {React.Children.map(children, child => {
      console.log(child);
      return React.cloneElement(child, {newProp}, null);
    })}
  </div>
)

检查 working demo