Para pasar los mismos accesorios a varios componentes de React o para pasar varios accesorios a un componente de React, puede usar el desempaquetado/destrucción de objetos dentro de los componentes.

 function Component() { const propPack = { variousProps1: variousProps1, variousProps2: variousProps2, variousProps3: variousProps3, }; return ( <> {options.map(option)} <StyledRow> {variousOptions.map((opt) => ( shouldRenderPlanA ? <StyledLabelOptionOne {...propPack} /> : <StyledLabelOptionTwo {...propPack} /> ))} </StyledRow> </> ); }

Esto se usa comúnmente para pasar todos los accesorios de los padres a los niños.

 function Component(props) { return ( condition ? <StyledLabelOptionOne {...props} /> : <StyledLabelOptionTwo {...props} /> ) }

También puede elegir condicionalmente el componente para renderizar (pero este en mi humilde opinión es menos legible)

 function Component() { const PickedComponent = shouldRenderPlanA ? StyledLabelOptionOne : StyledLabelOptionTwo; return ( <> {options.map(option)} <StyledRow> {variousOptions.map((opt) => ( <PickedComponent variousProps1={variousProps1} variousProps2={variousProps2} variousProps3={variousProps3} /> ))} </StyledRow> </> ); }

Para condiciones/accesorios derivados de .map() simplemente mueva el código dentro de la devolución de llamada del mapa

 function Component() { return ( <> {options.map(option)} <StyledRow> {variousOptions.map((opt) => { const propPack = { variousProps1: variousProps1, variousProps2: opt.value, }; const PickedComponent = opt.condition ? StyledLabelOptionOne : StyledLabelOptionTwo; return ( shouldRenderPlanA ? <StyledLabelOptionOne {...propPack} /> : <StyledLabelOptionTwo {...propPack} /> ) })} </StyledRow> </> ); }

Observe cómo la función de flecha dentro del mapa se ha convertido en una función de flecha con un bloque completo. De (opt) => (first_instruction) a (opt) => { first_instruction; return (second_instruction); } . Esto nos permite agregar código antes de renderizar en cada ciclo map() .

Puede asignar ambas opciones a una variable que contiene una unión de ambos tipos de componentes.

Combinar y luego esparcir los accesorios de un objeto también puede ser beneficioso, dependiendo de dónde provengan esos accesorios. Si se toman de opt dentro del mapa, entonces este segundo paso probablemente no sea necesario:

 const LabelComponent = shouldRenderPlanA ? StyledLabelOptionOne : StyledLabelOptionTwo; return ( <> {options.map(option)} <StyledRow> {variousOptions.map((opt) => ( <LabelComponent prop1={opt.prop1} prop2={opt.prop2} /> ))} </StyledRow> </> );

Podrías usar la API React Context . Esto le permitiría compartir los accesorios entre varios niños sin pasárselo a cada uno de ellos explícitamente.