javascript - 在 JSX 中使用 React.cloneElement()

Question

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

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

Answer 1

根据 documentation :

Clone and return a new React element using element as the starting point. The resulting element will have the original element’s props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.

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

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

检查 working demo