Me gustaría renderizar condicionalmente un componente React como este:
parent.ts
... <Parent> <Child/> <Parent> ... child.ts
... return (someBoolean && <Component/>) ... Recibo un error de TypeScript en child.ts que indica que Its return type 'false | Element' is not a valid JSX element.
Quiero que el condicional esté en child.ts , porque también se usa en otros lugares, no solo en parent.ts . ¿Cuál es la forma adecuada de hacer esto? ¿Tendría que conformarme con un ternario o si/si no?
creo que perdiste { to evaluate }
return (<> {someBoolean && <Component/>} </>)En mi experiencia usando cientos de miles de ternarios en React, recomendaría usarlo como
const A = () => { // Never in a form where it's easy to miss the ternary symbols // Leads to bugs... return (superUnderTip >= Math.pow(UserService.count(), 2)) ? <ProviderTrainsFully lights={{hgih: 33}} rest={"too many null"} /> : null; // Always in this form so your brain can super easily scan for the // test and the output component. return (superUnderTip >= Math.pow(UserService.count(), 2)) ? <ProviderTrainsFully lights={{hgih: 33}} rest={"too many null"} /> : null; // Never in a nested ternary -- make child components for additional // conditional rendering. }