Comment ajouter conditionnellement des attributs aux composants React?

Existe-t-il un moyen d'ajouter des attributs à un composant React uniquement si une certaine condition est remplie?

Je suis censé ajouter des attributs requis et readOnly pour former des éléments basés sur un appel Ajax après le rendu, mais je ne vois pas comment résoudre ce problème car readOnly = "false" n'est pas la même chose que d'omettre complètement l'attribut.

L'exemple ci-dessous devrait expliquer ce que je veux, mais cela ne fonctionnera pas (erreur d'analyse: identifiant inattendu).

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

Apparemment, pour certains attributs, React est suffisamment intelligent pour omettre l'attribut si la valeur que vous lui passez n'est pas véridique. Par exemple:

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

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

aura pour résultat:

<input type="text" required>

Mise à jour: si quelqu'un est curieux de savoir comment / pourquoi cela se produit, vous pouvez trouver des détails dans le code source de ReactDOM, en particulier aux lignes 30 et 167 du fichier DOMProperty.js .

réponse de juandemarco est généralement correcte, mais voici une autre option.

Construisez un objet comme vous le souhaitez:

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

if (condition)
  inputProps.disabled = true;

Rendu avec propagation, en passant éventuellement d'autres accessoires également.

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

Voici un exemple d'utilisation Bootstrap « s Buttonvia React-Bootstrap (version 0.32.4):

var condition = true;

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

Selon l'état, soit {bsStyle: 'success'}ou {}sera retourné. L'opérateur d'étalement répartit ensuite les propriétés de l'objet renvoyé vers le Buttoncomposant. Dans le cas falsifié, car aucune propriété n'existe sur l'objet retourné, rien ne sera transmis au composant.

Une manière alternative basée sur le commentaire d'Andy Polhill :

var condition = true;

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

La seule petite différence est que , dans le deuxième exemple , le composant intérieur <Button/>de » propsl'objet aura une clé bsStyleavec une valeur de undefined.

Voici une alternative.

var condition = true;

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

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

Ou sa version en ligne

var condition = true;

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

Voici une façon de procéder.

Avec un conditionnel :

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

Je préfère toujours utiliser la méthode habituelle de transmission des accessoires, car elle est plus lisible (à mon avis) dans le cas où il n'y a pas de conditionnel.

Sans conditionnel :

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

Vous pouvez utiliser le même raccourci, qui est utilisé pour ajouter / supprimer (des parties de) composants ( {isVisible && <SomeComponent />}).

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

Disons que nous voulons ajouter une propriété personnalisée (en utilisant aria- * ou data- *) si une condition est vraie:

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

Disons que nous voulons ajouter une propriété de style si une condition est vraie:

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

Si vous utilisez ECMAScript 6, vous pouvez simplement écrire comme ceci.

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

Cela devrait fonctionner, car votre état changera après l'appel Ajax et le composant parent sera rendu de nouveau.

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

Dans React, vous pouvez effectuer un rendu conditionnel des composants, mais également de leurs attributs, tels que les accessoires, className, id, etc.

Dans React, il est très recommandé d'utiliser l' opérateur ternaire qui peut vous aider à effectuer le rendu conditionnel des composants.

Un exemple montre également comment restituer conditionnellement Component et son attribut de style.

Voici un exemple 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>

En considérant le post JSX In Depth , vous pouvez résoudre votre problème de cette façon:

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