Hola, actualmente tengo el siguiente código React code:
return ( <Container> {booleanValueOne ? ( <TrueComponent props={props} /> ) : ( [ <DefaultComponentOne props={props} />, <DefaultComponentTwo props={props} />, ] )} </Container> ); Entonces, si booleanValueOne es verdadero, devolvemos <TrueComponent y, si no, devolvemos una matriz de DefaultComponents. Esto es sencillo.
Pero desde entonces quiero agregar un segundo valor booleano: booleanValueTwo , y si es verdadero, devolver TrueComponentTwo y si ni booleanValueOne ni booleanValueTwo son verdaderos, devolver la matriz de componentes predeterminados.
¿Alguien puede compartir las mejores prácticas para hacerlo?
No puedo usar un ternario ya que tengo 3 resultados posibles.
Puedes tener ternarios anidados. Debe ser legible si se alinea correctamente
const result = booleanValueOne ? ( <TrueComponent props={props} /> ) : booleanValueTwo ? ( <TrueComponentTwo props={props} /> ) : ( [<DefaultComponentOne props={props} />, <DefaultComponentTwo props={props} />] ); return (<Container>{result}</Container>) O puede usar el flujo de control normal if - else if para asignar el valor correcto a la variable de result .
let result = null; if (booleanValueOne) { result = <TrueComponent props={props} />; } else if (booleanValueTwo) { result = <TrueComponentTwo props={props} />; } else { result = [ <DefaultComponentOne props={props} />, <DefaultComponentTwo props={props} />, ]; }Puedes usar esta plantilla:
return ( <Container> {booleanValueOne && ( <TrueComponent props={props} /> )} {(!booleanValueOne && booleanValueTwo) && ( <TrueComponentTwo props={props} /> )} {(!booleanValueOne && !booleanValueTwo) && ( [ <DefaultComponentOne props={props} />, <DefaultComponentTwo props={props} />, ] )} </Container> );