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

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

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

最佳答案

根据 documentation :



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

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

检查 working demo