Me gustaría hacer un componente funcional que proporcione un apoyo a sus hijos inmediatos. No quiero usar un contexto porque quiero que solo esté disponible para los niños inmediatos.
Entonces, dados los siguientes componentes:
const TopLevel = () => { return ( <FooGiver> <LowerLevel /> </FooGiver> ) } interface LowerLevelProps { foo?: string; } const LowerLevel = ({foo}: LowerLevelProps) => { return foo ? <p>{foo}</p> : <p>No foo provided</p> } const FooGiver = ({ children }: FooGiverProps) => { const foo = bar // TODO: This should set its children's `foo` prop to "bar" return ( <> { children } </> ) } ¿Es posible definir FooGiver de tal manera que le dé a cualquier niño que reciba un foo prop de "bar" ?
Si es así, ¿tendría que continuar manteniendo el foo prop opcional, o TS tomaría en cuenta que FooGiver siempre establecerá foo y no se quejaría de que llamé a <LowerLevel /> sin proporcionar el foo prop requerido?
Creo que esto lo haría para agregar accesorios a todos los niños.
El siguiente componente de ejemplo agrega accesorios nuevos llamados newProp con valor true para todos los elementos secundarios que toma.
function Parent({children}){ return <> {children.map(child=>{ const modified = child; modified.props["newProp"] = true;//add new value to prop return modified })} </> }