Me gustaría representar un componente de dos dependiendo de un valor de indicador. Me preguntaba si hay una manera de hacer esto en una sola línea.
Estaba pensando en algo como esto: <(flag ? Comp1 : Comp2) att1={attValue} ... />
Si no hay una manera, ¿es posible agregarlo de alguna manera como una función en el futuro?
Puede interpolar un React.createElement que alterna entre los dos componentes.
<> { React.createElement(flag? Comp1 : Comp2, { att1: attValue }, null) } </>Conozco 2 formas de hacer esto de la manera JSX. Aunque todos requieren más de una línea, creo que todavía están SECOS y lo ayudan a evitar errores por duplicación de código. Esto es evidente, pero sus componentes deben recibir los mismos apoyos para que estos enfoques funcionen.
La primera es crear una variable para el componente deseado y luego renderizarla (tenga en cuenta que el nombre de esta variable debe comenzar con una letra mayúscula).
const YourComp = flag ? Comp1 : Comp2; <YourComp att1={attValue} ... />La segunda forma es crear una variable para sus accesorios y luego distribuirla:
const props = { attr1: attrValue, ... } {flag ? <Comp1 {...props} /> : <Comp2 {...props} />}