Quiero mostrar un componente en función de una variable. La variable debe poder contener una cantidad flexible de condiciones/tipos.
Ejemplo: quiero mostrar mi componente si test1 === falso o test2 es igual a un número mayor que 0. Pero también debería permitir expandirse. Esto es lo que estoy intentando hasta ahora.
const test1 = false const test2 = 10 const conditionVar = test1 === false || test2 > 0 return ( { conditionVar ? <MyComponent /> : null } )Las preguntas serían si esta es una buena o mala práctica. ¿Puedo extender esto, por ejemplo, si necesito las variables test3, test4... en el futuro como condiciones? ¿Será seguro y funcionará como se espera cada vez?
Esa es una práctica común cuando está dentro de una estructura JSX más grande, aunque con su ejemplo específico no hay razón para ser indirecto, solo:
return conditionVar ? <MyComponent /> : null; Si sabe que conditionVar será null , undefined o false (específicamente) cuando no quiera renderizar o sea verdadero cuando lo haga, también puede hacer:
return conditionVar && <MyComponent />;O en una estructura más grande:
return <div> {/*...something...*/} {conditionVar && <MyComponent />} </div>;Pero otra opción es simplemente establecer una variable para lo que desea representar:
const component = !test1 || test2 > 0 ? <MyComponent /> : null; luego, al renderizar, use el component :
return component;o en una estructura más grande:
return <div> {/*...something...*/} {component} </div>;Todos están bien en contexto.
Como otros han mencionado, tu enfoque está bien. Sin embargo, diría que en una situación más compleja, sería más legible colocar las diferentes condiciones y renderizaciones una tras otra.
Además, puede utilizar devoluciones anticipadas para que, si no hay datos para mostrar, su componente se cierre de inmediato.
Aquí hay un ejemplo:
if (noData) { return null; } if (condition1) { return <Component1 />; } if (condition2) { return ( <div> <Component2A /> <Component2B /> ... </div> ); }Teniendo esto en mente, reescribiría tu ejemplo así:
if (test1 && test2 <= 0) { return null; } return <MyComponent />; Nota: test1 no es precisamente lo mismo que el negativo de test1 === false pero creo que esa era la intención.