Clonagem e injeção de props com cloneElement

Boas-vindas

O que é cloneElement?

const clone = React.cloneElement(child, { active: true });

Por que usar cloneElement?

Exemplo de barra de abas

function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

Regras de mesclagem de propriedades

Mesclando manipuladores de eventos

React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

Substituindo filhos

// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

Verificando o tipo do elemento antes de cloná-lo

if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement e Contexto

Alternativa moderna: propriedades de renderização e ganchos

Verificação rápida

Recapitulação

Curso concluído