在JSX中使用React.cloneElement()

Question

我想知道如何在JSX中使用cloneElement语法.我阅读了Docs并尝试了一些例子,但仍然没有任何线索.

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

Answer 1

根据文件:

使用element作为起点克隆并返回一个新的React元素.结果元素将具有原始元素的道具,新道具以浅层方式合并.新的孩子将取代现有的孩子.key和ref将保留原始元素.

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

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

查看工作演示