Desenvolvi com React por meses sem entender totalmente o verdadeiro poder do modelo de componente React. Um dia resolvi mergulhar na composição e foi isso que aprendi.

Componentes e filhos do React

No React, um componente pode ter um, muitos ou nenhum filho. Ótimo, mas espere – o que são “crianças”? Vamos explicar com um exemplo:

O componente Profile tem dois filhos: ProfileImage e ProfileDetails, enquanto esses dois não têm filhos.

"Em expressões JSX que contêm uma tag de abertura e uma tag de fechamento, o conteúdo entre essas tags é passado como uma propriedade especial: props.children" — Documentação do React

Essencialmente, props.children é um prop especial, passado automaticamente para cada componente, que pode ser usado para renderizar o conteúdo incluído entre as tags de abertura e fechamento ao invocar um componente. Esses tipos de componentes são identificados pela documentação oficial como "caixas".

Identificação de componentes pela sintaxe JSX

No JSX do React, um componente com filhos é sempre identificado por uma tag de abertura e uma tag de fechamento. Cada filho deve ser colocado entre essas duas tags, conforme vimos acima. Quando um componente não tem filhos, você pode invocá-lo com ou , mas a última sintaxe geralmente é preferida. O objetivo das tags de fechamento automático é tornar o código mais curto e fácil de ler.

props.children em Ações

Vamos supor que queremos criar um componente ImageSlider. Nosso objetivo é invocar o componente assim:

Como você pode ver, ImageSlider é composto por vários que podem ser acessados ​​e renderizados através de props.children.

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

Graças a props.children podemos aninhar nosso conteúdo dentro de um componente, assim como aninhamos elementos HTML comuns.

Que tipos de conteúdo são permitidos para props.children?

O conteúdo passado para um componente por meio de props.children pode incluir

indefinido, nulo, um booleano, um número, uma string, um elemento React ou uma matriz de qualquer um desses tipos recursivamente. Também pode ser uma função que retorna um desses tipos.

Observe que, conforme mencionado na documentação do React, false, null, undefined e true são filhos válidos, mas eles serão ignorados e não renderizados. Se você deseja que falso, verdadeiro, nulo ou indefinido seja renderizado, você deve primeiro convertê-lo em uma string:

  { String(undefined) }

Por que props.children é tão importante?

props.children nos permite compor componentes e, portanto, nossa interface front-end; aproveitando o poder real do modelo de componente React.

"O React tem um modelo de composição poderoso e recomendamos usar composição em vez de herança para reutilizar código entre componentes." — Documentação do React

Conforme abordado na documentação oficial, às vezes pode ser necessário preencher vários "buracos" em um componente. Nesses casos, em vez de usar props.children, definir vários adereços personalizados pode ser a abordagem preferível; conforme mostrado no exemplo a seguir:

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

Reagir.Crianças

"React.Children fornece utilitários para lidar com a estrutura de dados opaca props.children" — Documentação do React

Por que props.children é uma "estrutura de dados opaca"?

Como props.children pode consistir em um, muitos ou nenhum elemento filho, o que significa que seu valor pode ser um único nó filho, uma matriz de nós filhos ou indefinido respectivamente. Graças à API React.Children podemos lidar facilmente com props.children sem levar em consideração cada um de seus tipos possíveis. Felizmente, tudo será tratado para nós em segundo plano.

No momento em que este artigo foi escrito, React.Children oferece cinco utilitários diferentes:

• mapa

• para cada

• contar

• apenas

• toArray

Vamos ver como podemos usar React.Children com um exemplo. Digamos que queremos adicionar a classe CSS especial img-special-class a cada um dos filhos do componente ImageSlider. Isso pode ser feito da seguinte forma:

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map nos permite iterar sobre props.children e transformar cada elemento de acordo com a função passada como segundo parâmetro. Para atingir nosso objetivo, usamos React.cloneElement. Isso ocorre porque precisávamos alterar o valor da propriedade className, mas props são imutáveis ​​​​no React, então tivemos que clonar cada filho.

Conclusão

Dominar props.children é essencial para se tornar um grande desenvolvedor React e começar a aproveitar todo o potencial do modelo de componente React. props.children é um dos recursos mais úteis do React, pois nos dá a capacidade de renderizar componentes filhos. Por isso, todo desenvolvedor deve saber como usá-lo corretamente.

Espero que este artigo ajude você a dominar a composição no React.

A postagem "Um guia completo para props.children In React" apareceu pela primeira vez no Writech.