用react.cloneElement（）保存的参考文献

Question

React.cloneElement(
  element,
  [props],
  [...children]
)

<element.type {...element.props} {...props}>{children}</element.type>

那么祖先的作用是什么？在这种背景下，祖先是什么？

Answer 1

为了给出文档所示的示例，让我们考虑一个组件应用程序，该应用程序呈现一个组件main，并且有两个子组件Home和Dashboard，它为其指定了refs

class App extends React.Component {
   constructor(props) {
      super(props);
      this.homeRef = React.createRef();
      this.dashboardRef = React.createRef();
   }
   render() {
      return (
          <Main>
               <Home ref={this.homeRef} key={'Home'}/>
               <Dashboard ref={this.dashboardRef} key={'Dashboard'}/>
          </Main>
      )         
   }
}

现在，主组件克隆子元素，向其子元素添加一个onClick道具，

class Main extends React.Component {
   onClick = () => {}
   render() {
       return (
          <div>
              {/* Some content here */}
              {React.Children.map(this.props.children, child => {
                 return React.cloneElement(child, {onClick: this.onClick})
               })}
          </div>
       )
   }
}

现在，当main组件克隆其子组件时

React.cloneElement(child, {onClick: this.onClick})

演示上述内容

附言。CloneElement不是用来克隆组件的，而是用来呈现JSX实例的，主要是为了向

从其他地方呈现的子组件