¿Hay alguna manera de agregar atributos a un componente React solo si se cumple una determinada condición?
Se supone que debo agregar los atributos requeridos y de solo lectura para formar elementos basados en una llamada Ajax después del renderizado, pero no puedo ver cómo resolver esto ya que readOnly="false" no es lo mismo que omitir el atributo por completo.
El siguiente ejemplo debería explicar lo que quiero, pero no funciona.
(Error de análisis: identificador inesperado)
function MyInput({isRequired}) { return <input classname="foo" {isRequired ? "required" : ""} /> }Aparentemente, para ciertos atributos, React es lo suficientemente inteligente como para omitir el atributo si el valor que le pasa no es verdadero. Por ejemplo:
const InputComponent = function() { const required = true; const disabled = false; return ( <input type="text" disabled={disabled} required={required} /> ); }resultará en:
<input type="text" required>Actualización: si alguien tiene curiosidad sobre cómo/por qué sucede esto, puede encontrar detalles en el código fuente de ReactDOM, específicamente en las líneas 30 y 167 del archivo DOMProperty.js .
La respuesta de juandemarco suele ser correcta, pero aquí hay otra opción.
Construye un objeto como quieras:
var inputProps = { value: 'foo', onChange: this.handleChange }; if (condition) inputProps.disabled = true;Renderizar con extensión, opcionalmente pasando también otros accesorios.
<input value="this is overridden by inputProps" {...inputProps} onChange={overridesInputProps} />Aquí hay un ejemplo del uso del Button de Bootstrap a través de React-Bootstrap (versión 0.32.4):
var condition = true; return ( <Button {...(condition ? {bsStyle: 'success'} : {})} /> ); Según la condición, se {bsStyle: 'success'} o {} . El operador de propagación luego distribuirá las propiedades del objeto devuelto al componente Button . En el caso falso, dado que no existen propiedades en el objeto devuelto, no se pasará nada al componente.
Una forma alternativa basada en el comentario de Andy Polhill :
var condition = true; return ( <Button bsStyle={condition ? 'success' : undefined} /> ); La única pequeña diferencia es que en el segundo ejemplo, el objeto props del componente interno <Button/> tendrá una clave bsStyle con un valor de undefined .