Introdução
O que é React.cloneElement ()?
React.cloneElement () faz parte da API de nível superior React usada para manipular elementos. Ele clona e retorna um novo elemento usando seu primeiro argumento como ponto de partida. Este argumento pode ser um elemento React ou um componente que renderiza um elemento React.
O novo elemento terá as seguintes características:
Os adereços do elemento original com os novos adereços mesclados superficialmente Novos filhos substituem a chave filha existente e a referência do elemento original são preservadas.
React.cloneElement () é útil quando você deseja adicionar ou modificar os adereços dos filhos de um componente pai, evitando códigos duplicados desnecessários.
Sintaxe e uso de React.cloneElement ()
Antes de examinar alguns exemplos, vamos examinar a sintaxe de React.cloneElement (). A sintaxe é fornecida no próximo bloco de código, seguido por algumas definições de termos.
React.cloneElement (element, [props], [… children]) element: O elemento a ser clonado [props]: Props que serão adicionados ao elemento clonado além daqueles do elemento original [… filhos]: Os filhos do objeto clonado. Observe que os filhos do objeto existente não são copiados
Você pode usar React.cloneElement () dentro da definição de um componente pai para realizar os seguintes processos:
Modificar propriedades dos filhos Adicionar às propriedades dos filhos Estender a funcionalidade de componentes filhos
Este artigo se aprofunda em cada um desses três tipos de manipulação usando os seguintes exemplos:
Modificar propriedades dos filhos Personagens repetidos Filhos chiques botão Modificar os atributos do botão de opção imediatamente Clonar outro elemento React como um prop Adicionar às propriedades filhos Texto em negrito Passar prop para um elemento recebido via React.cloneElement () Estenda a funcionalidade dos componentes filhos Alerta ao clicar
Modificar propriedades filhas
Quando você modifica propriedades filhas, isso significa que você altere as propriedades dos filhos em passando-os pelo componente pai .
Não há maneira melhor de explicar do que por meio de exemplos de código reais. Usaremos os seguintes exemplos para ilustrar esse conceito:
Caracteres repetidos Botão filho chique Modificar os atributos dos botões de opção imediatamente Clonar o elemento React como uma propriedade
Antes de prosseguirmos, observe que nestes exemplos, as propriedades modificadas são mescladas superficialmente-a chave e a referência são mantidas. Ainda não há criação de novos filhos, embora veremos isso no último exemplo deste artigo.
1. Caracteres repetidos
No próximo bloco de código, RepeatCharacters é um componente pai e CreateTextWithProps é um componente filho.
CreateTextWithProps tem um atributo chamado ASCIIChar cujo valor é qualquer caractere ASCII válido. RepeatCharacters usará React.cloneElement () para repetir esse caractere no elemento clonado o número de vezes especificado em sua propriedade times.
import React from”react”; Const CreateTextWithProps=({text, ASCIIChar,… props})=> {return ( {text} {ASCIIChar} )}; Const RepeatCharacters=({times, children})=> {return React.cloneElement (children, {//Isso substituirá o ASCIIChar original no texto. ASCIIChar: children.props.ASCIIChar.repeat (times),})} ; Function App () {return (
)} exportar o aplicativo padrão
Abaixo está o resultado conforme visto em um navegador da Web:
2. Botão filho extravagante
Nada extravagante aqui-este é um código que mostra um botão com o texto “Botão extravagante” nele. É a prova de que você pode personalizar esses componentes para atender às suas necessidades.
O componente ButtonContainer usa React.cloneElement () para modificar a aparência do elemento renderizado pelo componente Button.
Em neste caso, você fornece null como o terceiro argumento para React.cloneElement () porque, como um lembrete, você não está criando nenhum filho novo.
import React from”react”; Const ButtonContainer=(props)=> {let newProp={backgroundColor:”# 1560bd”, textColor:’#ffffff’, border:’1px solid #cccccc’, preenchimento:’0.2em’,} return (
)}; Const Button=(props)=> {return } function App () {return (
Ao visualizar o resultado em um navegador da Web, você obterá algo semelhante à imagem abaixo.
3. Modifique os atributos dos botões de opção
Em HTML, os botões de opção são agrupados. Você só pode selecionar uma das opções fornecidas, e elas sempre parecem ter um atributo de nome anexado a elas.
Com o conhecimento que você adquiriu até agora, você pode adicionar dinamicamente este atributo de nome a vários componentes filho por meio de um único componente pai.
Nesse caso, o componente filho deve ser botões de opção ou um componente que renderiza os botões de opção.
import React from”react”; Const RadioGroup=(props)=> {const RenderChildren=()=> (React.Children.map (props.children, child=> {return React.cloneElement (child, {name: props.name,})}) ) Return (
)} const RadioButton=(props)=> {return ()} function App () {return (
Você pode usar o Inspecionar Elemento do navegador recurso para confirmar isso.
4. Clone outro elemento React como um prop
Você provavelmente se encontrará em uma situação em que terá que criar um cabeçalho de site com texto diferente para diferentes páginas da web.
Múltiplas opções estão disponíveis em seu arsenal React, que provavelmente inclui armazenar o texto do cabeçalho em uma variável, passar essa variável como um suporte para um componente e renderizar o texto. Você provavelmente faria isso dentro de cada componente que requer esse texto de cabeçalho.
Como você pode imaginar, isso cria uma duplicação de código desnecessária e, como os desenvolvedores de software sabem, devemos sempre defender a simplicidade.
Em vez disso, você pode usar React.cloneElement para atingir esse mesmo objetivo com mais facilidade. Crie três componentes reutilizáveis, a saber:
Header DefaultHeader BigHeader
O componente Header receberia um componente como prop. Este componente irá eventualmente renderizar o texto do cabeçalho. Por segurança, DefaultHeader será o componente padrão passado para o Header.
DefaultHeader irá renderizar o texto padrão. Este texto padrão é renderizado quando Header é chamado sem props.
Enquanto isso, o componente BigHeader terá um prop de mensagem cujo valor é o texto do cabeçalho escolhido. Cada vez que você passa BigHeader para Header, você pode modificar o valor desta mensagem prop antes de ser renderizada por BigHeader.
Tudo isso é ilustrado no próximo bloco de código.
import React from”react”; import {BrowserRouter as Router, Route, Link} from’react-router-dom’; Const DefaultHeader=(color)=> {return (
Site de Habdul Hazeez
)} const defaultMessage=’Site de Habdul Hazeez’; Const BigHeader=({color, message=defaultMessage})=> {return (
)} const Header=({hero=
)} const HomePage=()=> {return (
Adicionar a propriedades filhas
Quando você adiciona a uma propriedade filha, significa que você inseriu algo novo em o filho por meio do componente pai.
Os exemplos a seguir discutidos nesta seção irão explicar como adicionar adereços por meio de React.cloneElement ().
Observe, como afirmei na seção anterior , os novos adereços são mesclados, chave e ref são mantidos e novos filhos não são criados (pelo menos por agora).
Texto em negrito
Não desanime ao ler o título desta seção e pense: “Isso é fácil.” Eu sei que é”fácil”-em sua aparência. A lição aqui é adicionar uma propriedade ao (s) elemento (s) filho (s) usando React.cloneElement ().
Para mostrar como isso funciona, vamos revisitar o primeiro exemplo neste artigo, sobre caracteres repetidos. No entanto, você não repetirá nenhum caractere-em vez disso, definirá um estilo CSS personalizado que é adicionado ao filho usando a função React.cloneElement ().
Isso é ilustrado no próximo bloco de código.
import React from”react”; const CreateTextWithProps=({text,… props})=> {return ( {text} )}; const BoldText=({children})=> {return React.cloneElement (children, {style: {fontWeight:’bold’},})}; function App () {return (
)} exportar o aplicativo padrão;
Passe prop para um elemento recebido via React.cloneElement ()
Isso é semelhante ao que você fez na seção acima, intitulada “Clone outro elemento React como um prop,” mas aqui, você’Vou clonar um prop usando React.cloneElement (). Este prop deve ser um elemento React válido, como
