Início / coding / Perguntas / 79410098
Accepted
mikeb
Asked: 2025-02-04 05:49:32 +0800 CST

Método Render no componente de design de carbono React

  • 772

Estou trabalhando com design de Carbono e React - seguindo o exemplo:

<HeaderContainer render={({
        isSideNavExpanded,
        onClickSideNavExpand
      }) => {
        console.log("Rendering", onClickSideNavExpand)
        console.log("Rendering", isSideNavExpanded)
        return (<> ... 
                   <HeaderMenuButton aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'} onClick={onClickSideNavExpand} isActive={isSideNavExpanded} aria-expanded={isSideNavExpanded} />
                   my stuff 
                   ...</>)
}/>

Não entendi o método render aqui. Qual é a diferença entre esse método e entre usar "children", algo como:

<HeaderContainer>
 <> 
  <HeaderMenuButton aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'} onClick={onClickSideNavExpand} isActive={isSideNavExpanded} aria-expanded={isSideNavExpanded} />
  ... my stuff ... 
 </>
</HeaderContainer>

Por que implementar da primeira maneira em vez da segunda? Acho que é muito menos legível...

reactjs

1 respostas

  1. Best Answer

    passar uma função render é chamadorender prop

    O termo “render prop” se refere a uma técnica para compartilhar código entre componentes React usando um prop cujo valor é uma função.

    Um componente com uma propriedade render recebe uma função que retorna um elemento React e o chama em vez de implementar sua própria lógica de renderização.

    se isSideNavExpandede onClickSideNavExpandexistirem dentro de HeaderContainer, você não poderá passá-los para , HeaderMenuButtoncomo no seu segundo exemplo.

    const Component = ({render}) => {
  const localData = ...      // this lies inside the children component
  return render(localData)   // this is how the parent access the data
}

<Component render={(dataFromComponent) => {  // access data from Component
  ...do something with data
  return view
}} />
    • 1

relate perguntas