Quiero compartir accesorios entre todos los componentes pero con un componente contenedor Por ejemplo:
const name = "Test" return ( <Wrapper myprops={name}> <Image/> <House/> </Wrapper> ) Entonces, ¿puedo obtener los myprops de Image and House?
La API de contexto se usa para compartir datos entre componentes en diferentes niveles de anidamiento, puede leer esto en React doc :
El contexto se usa principalmente cuando muchos componentes deben tener acceso a algunos datos en diferentes niveles de anidamiento. Aplíquelo con moderación porque dificulta la reutilización de los componentes.
Para su caso, sus componentes Image y House están al mismo nivel. En cambio, puedes usar la composición y pasar los accesorios a tus niños internos de esta manera:
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>; }Esta es una demostración simple: https://stackblitz.com/edit/react-szxqwg
La respuesta de @Soufiane Boutahlil es legítima, pero te falta un apoyo clave . De lo contrario, React se enojará contigo.
function Wrapper({ children, ...props }) { return <>{children.map((child, i) => <React.Fragment key={i}> cloneElement(child, { ...props })) </React.Fragment>} </>; }