¿Cómo usar la función React.cloneElement()?

Podemos usar el método React.cloneElement() cuando un componente padre quiere agregar o modificar los accesorios de sus hijos. La función React.cloneElement() crea un clon de un elemento dado, y también podemos pasar accesorios y niños en la función.

El elemento resultante tendría los accesorios del elemento inicial mezclados superficialmente con los nuevos accesorios. Los niños existentes serán reemplazados por niños nuevos. Se conservarán la clave del elemento original y la referencia.

Sintaxis:

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

El primer argumento es el elemento que queremos clonar. El segundo argumento serán accesorios adicionales que queremos agregar con el elemento. Y el tercer argumento serán los elementos secundarios de los elementos clonados y los elementos secundarios del elemento existente no se copiarán en los elementos clonados.

Clonar un elemento con React.cloneElement() es casi lo mismo que:

<element.type {...element.props} {...new_props}>
   {new_children}
</element.type>

Sin embargo, también conserva las refs. Esto significa que no robará involuntariamente una referencia de su antepasado si tiene un hijo con una. Se asignará la misma referencia a su nuevo elemento.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
class App extends React.Component {
  render() {
    return (
      <Parent>
        <Button />
        <br /><br />
        <Button />
      </Parent>
    )
  }
}
  
class Parent extends React.Component {
  render() {
    let btncolor = 'red';
    return (
      <div>
        {React.Children.map(this.props.children,
          child => {
            return React.cloneElement(child,
              { btncolor }, null); //third parameter is null
              // Because we are not adding any children
          })}
      </div>
    )
  }
}
  
class Button extends React.Component {
  render() {
    return (
      <button style=
        {{ color: this.props.btncolor }}>
        Hello from GFG
      </button>
    )
  }
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: Como podemos ver en el código anterior, el componente principal está agregando nuevos accesorios para el color del texto al componente secundario (botón) usando el método React.cloneElement().