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

在JSX中使用React.cloneElement（）

1 个答案: