Encontré una respuesta muy votada a una pregunta con el siguiente código:
var condition = true; return ( <Button {...condition ? {bsStyle: 'success'} : {}} /> );¿Por qué se requiere...? Si lo omito, babel se queja de que:
repl: Unexpected token, expected ... Parece la sintaxis extendida, pero la condition es un valor booleano. Tengo problemas para encontrar documentos que expliquen lo que está pasando.
Si revisa MDN: Operador de propagación :
La sintaxis extendida permite que una expresión se expanda en lugares donde se esperan múltiples argumentos (para llamadas a funciones) o múltiples elementos (para literales de matriz) o múltiples variables (para asignación de desestructuración).
Si ve, el operador de propagación dentro de la sintaxis jsx para evaluar la expresión, entonces
<Button {...condition ? {bsStyle: 'success'} : {}} /> Se convertiría en algo como, (after babel run with react bootstrap example) :
_react2.default.createElement(_reactBootstrap.Button, condition ? { bsStyle: 'success' } : {})
También se puede escribir como:
<Button bsStyle={condition ? 'success' : ''} /> Lo que significa que está pasando los accesorios bsStyle con una cadena vacía .
Entonces, para pasar condicionalmente los accesorios, puede aprovechar el operador de propagación y evaluar la expresión. Esto nos ayuda a pasar múltiples accesorios con condiciones:
<Button {...condition ? {bsStyle: 'success', bsSize:"large"} : {}} />En vez de:
<Button bsStyle={condition ? 'success' : ''} bsSize={condition ? 'large' : ''} />Está utilizando un valor booleano para devolver un objeto . El uso del operador de propagación ... es para difundir ese objeto, por lo que puede hacerlo más legible para usted usando paréntesis:
var condition = true; <Button { ...(condition ? {bsStyle: 'success'} : {}) } />Lo que es equivalente a esto, si su variable es verdadera:
<Button { ...{bsStyle: 'success'} } />o este si tu variable es falsa:
<Button { ...{} } />