Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

155
Visualizações
If I wrap a react components in one big react component will they share props

I want to share props between all components but with a wrapper component For example:

const name = "Test"
return (
    <Wrapper myprops={name}>
      <Image/>
      <House/>
    </Wrapper>
)

So can I get the myprops from Image and House?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Context API is used to share data between components in different nesting levels, you can read this from React doc:

Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.

For your case, your components Image and House are at the same level. Instead, you can use the composition and pass the props to your inner children like this:

import React, { cloneElement } from 'react';
import './style.css';

export default function App() {
  const name = 'Test';

  return (
    <Parent>
      <Wrapper myprops={name}>
        <Image />
        <House />
      </Wrapper>
    </Parent>
  );
}

function Parent({ children }) {
  return children;
}

function Wrapper({ children, ...props }) {
  return <>{children.map((child) => cloneElement(child, { ...props }))}</>;
}

function Image(props) {
  console.log(props);
  return <div>Image</div>;
}

function House(props) {
  console.log(props);
  return <div>House</div>;
}

This is a simple demo: https://stackblitz.com/edit/react-szxqwg

about 4 years ago · Juan Pablo Isaza Relatório

0

The answer of @Soufiane Boutahlil is legit, But you are missing a key prop. Otherwise, React will go mad at you.

function Wrapper({ children, ...props }) {
  return <>{children.map((child, i) => 
           <React.Fragment key={i}>
             cloneElement(child, { ...props }))
           </React.Fragment>}
         </>;
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda