Explorando React.cloneElement §

---

Em React, o método React.cloneElement permite criar cópias de elementos React, adicionando ou substituindo propriedades. Essa funcionalidade é útil em situações em que você deseja clonar um componente React existente, mas com algumas modificações específicas.

Sintaxe §

A sintaxe básica do React.cloneElement é a seguinte:

React.cloneElement(elemento, [props], [...filhos]);

• elemento: O componente React que será clonado.
• props (opcional): Um objeto contendo as novas propriedades que você deseja aplicar ao componente clonado.
• filhos (opcional): Novos componentes filhos que substituirão os filhos existentes do componente clonado.

Exemplo de uso §

Vamos considerar um exemplo em que temos um componente Parent que possui um componente filho Child:

import React from 'react';
 
const Child = ({ cor }) => (
  <div style={{ backgroundColor: cor, padding: '10px' }}>Eu sou o Filho</div>
);
 
const Parent = () => (
  <div>
    <h2>Pai</h2>
    <Child cor="azul" />
  </div>
);

Agora, usando React.cloneElement, podemos criar uma cópia do componente Child com uma cor diferente dentro do componente Parent:

import React from 'react';
 
const Child = ({ cor }) => (
  <div style={{ backgroundColor: cor, padding: '10px' }}>Eu sou o Filho</div>
);
 
const Parent = () => {
  const newChild = React.cloneElement(<Child cor="azul" />, { cor: 'verde' });
 
  return (
    <div>
      <h2>Pai</h2>
      {newChild}
    </div>
  );
};

No exemplo acima, newChild é uma cópia do componente Child com a propriedade cor alterada para 'verde'.

Uso com componentes filhos existente §

React.cloneElement também pode ser útil quando você deseja clonar um componente React existente e adicionar ou modificar propriedades.

import React from 'react';
 
const Parent = ({ children }) => {
  const modifiedChildren = React.Children.map(children, (child) => {
    return React.cloneElement(child, { newProp: 'Valor Adicional' });
  });
 
  return <div>{modifiedChildren}</div>;
};
 
const App = () => (
  <Parent>
    <div>Primeiro Filho</div>
    <div>Segundo Filho</div>
  </Parent>
);

No exemplo acima, cada filho do componente Parent é clonado usando React.cloneElement, adicionando a nova propriedade newProp a cada um.

O React.cloneElement oferece uma maneira flexível de criar cópias de componentes React com modificações específicas, tornando-o uma ferramenta valiosa em situações onde a reutilização de componentes é fundamental, por exemplo ao utilizar o Padrão Compound Components.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)