Come posso aggiungere condizionalmente attributi ai componenti di React?

C'è un modo per aggiungere attributi a un componente React solo se viene soddisfatta una determinata condizione?

Dovrei aggiungere gli attributi obbligatori e readOnly per formare elementi basati su una chiamata Ajax dopo il rendering, ma non riesco a vedere come risolverlo poiché readOnly = "false" non equivale a omettere completamente l'attributo.

L'esempio seguente dovrebbe spiegare quello che voglio, ma non funzionerà (errore di analisi: identificatore imprevisto).

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" : ""} />
        );
    }
});

Apparentemente, per certi attributi, React è abbastanza intelligente da omettere l'attributo se il valore che gli passi non è vero. Per esempio:

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

comporterà:

<input type="text" required>

Aggiornamento: se qualcuno è curioso di sapere come / perché ciò accade, è possibile trovare i dettagli nel codice sorgente di ReactDOM, in particolare alle righe 30 e 167 del file DOMProperty.js .

La risposta di juandemarco è generalmente corretta, ma ecco un'altra opzione.

Costruisci un oggetto come preferisci:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

Render con diffusione, opzionalmente passando anche altri oggetti di scena.

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

Ecco un esempio di utilizzo di Bootstrap 's Buttonvia React-Bootstrap (versione 0.32.4):

var condition = true;

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

A seconda delle condizioni, sia {bsStyle: 'success'}o {}sarà restituito. L'operatore di diffusione distribuirà quindi le proprietà dell'oggetto restituito al Buttoncomponente. Nel caso errato, poiché non esiste alcuna proprietà sull'oggetto restituito, nulla verrà passato al componente.

Un modo alternativo basato sul commento di Andy Polhill :

var condition = true;

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

L'unica differenza è che piccolo nel secondo esempio il componente interno <Button/>'s propsoggetto avrà una chiave bsStylecon un valore undefined.

Ecco un'alternativa.

var condition = true;

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

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

O la sua versione in linea

var condition = true;

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

Ecco un modo per farlo.

Con un condizionale :

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

Preferisco ancora usare il modo regolare di far passare gli oggetti di scena, perché è più leggibile (secondo me) nel caso in cui non ci siano condizionali.

Senza condizioni :

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

È possibile utilizzare lo stesso collegamento utilizzato per aggiungere / rimuovere (parti di) componenti ( {isVisible && <SomeComponent />}).

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

Diciamo che vogliamo aggiungere una proprietà personalizzata (usando aria- * o data- *) se una condizione è vera:

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

Diciamo che vogliamo aggiungere una proprietà di stile se una condizione è vera:

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

Se usi ECMAScript 6, puoi semplicemente scrivere così.

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

Questo dovrebbe funzionare, poiché il tuo stato cambierà dopo la chiamata Ajax e il componente padre verrà nuovamente visualizzato.

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

In React puoi rendere condizionalmente i componenti, ma anche i loro attributi, come oggetti di scena, className, id e altro.

In React è un'ottima pratica usare l' operatore ternario che può aiutarti a rendere condizionatamente i componenti.

Un esempio mostra anche come eseguire il rendering condizionale del componente e del suo attributo di stile.

Qui c'è un semplice esempio:

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>

Considerando il post JSX In Depth , puoi risolvere il tuo problema in questo modo:

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