¿Cómo agrego condicionalmente atributos a los componentes React?

¿Hay alguna manera de agregar solo atributos a un componente Reaccionar si se cumple una determinada condición?

Se supone que debo agregar los atributos obligatorios y readOnly 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 funcionará (Error de análisis: identificador inesperado).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

Aparentemente, para ciertos atributos, React es lo suficientemente inteligente como para omitir el atributo si el valor que le pasas no es verdadero. Por ejemplo:

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var 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;

Render con extensión, opcionalmente pasando otros accesorios también.

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

Aquí es un ejemplo del uso Bootstrap 's Buttona través de Reaccionar-Bootstrap (versión 0.32.4):

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

Dependiendo de la condición, {bsStyle: 'success'}o {}será devuelto. El operador de propagación distribuirá las propiedades del objeto devuelto al Buttoncomponente. 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 que el componente interno <Button/>'s propsobjeto tendrá una clave bsStylecon un valor de undefined.

Aquí hay una alternativa.

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

O su versión en línea

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

Aquí hay una forma en que lo hago.

Con un condicional :

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

Todavía prefiero usar la forma regular de pasar los accesorios, porque es más legible (en mi opinión) en el caso de que no tenga ningún tipo de condicionales.

Sin un condicional :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

Puede usar el mismo acceso directo, que se usa para agregar / eliminar (partes de) componentes ( {isVisible && <SomeComponent />}).

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

Digamos que queremos agregar una propiedad personalizada (usando aria- * o data- *) si una condición es verdadera:

{...this.props.isTrue && {'aria-name' : 'something here'}}

Digamos que queremos agregar una propiedad de estilo si una condición es verdadera:

{...this.props.isTrue && {style : {color: 'red'}}}

Si usa ECMAScript 6, simplemente puede escribir así.

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />

Esto debería funcionar, ya que su estado cambiará después de la llamada Ajax, y el componente padre se volverá a procesar.

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}

En React puede renderizar condicionalmente Componentes, pero también sus atributos, como accesorios, className, id y más.

En React es una muy buena práctica usar el operador ternario que puede ayudarlo a procesar componentes condicionalmente.

Un ejemplo también muestra cómo renderizar condicionalmente Component y su atributo de estilo.

Aquí hay un ejemplo simple:

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Teniendo en cuenta la publicación JSX In Depth , puede resolver su problema de esta manera:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);