如何使用 React.cloneElement()函数？

当父组件想要添加或修改其子组件的 props 时，我们可以使用 React.cloneElement() 方法。 React.cloneElement()函数创建给定元素的克隆，我们也可以在函数中传递 props 和 children。

结果元素将初始元素的道具与新道具浅混合。现有的孩子将被新的孩子取代。原始元素的键和引用将被保留。

句法：

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

第一个参数是我们要克隆的元素。第二个参数将是我们要与元素一起添加的其他道具。第三个参数将是克隆元素的子元素，现有元素的子元素不会被复制到克隆元素中。

使用 React.cloneElement() 克隆元素几乎与以下内容相同：

   {new_children}

但是，它也保留了 refs。这意味着如果您有一个孩子，您不会无意中从您的祖先那里窃取 ref。相同的 ref 将分配给您的新元素。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

项目结构：它将如下所示。

App.js：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react';
class App extends React.Component {
  render() {
    return (
      
        
        


        
      
    )
  }
}
  
class Parent extends React.Component {
  render() {
    let btncolor = 'red';
    return (
      

        {React.Children.map(this.props.children,
          child => {
            return React.cloneElement(child,
              { btncolor }, null); //third parameter is null
              // Because we are not adding any children
          })}
      
    )
  }
}
  
class Button extends React.Component {
  render() {
    return (
      
        Hello from GFG
      
    )
  }
}
  
export default App

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

说明：从上面的代码中我们可以看到，父组件正在使用 React.cloneElement() 方法将文本颜色的新道具添加到子 (Button) 组件。