Comment ajouter dynamiquement des propriétés basées sur les conditions dans les composants React ?

Question

Existe-t-il un moyen d'ajouter des propriétés à un composant React uniquement lorsque certaines conditions sont remplies ?

Je dois ajouter les attributs obligatoires et readOnly à l'élément de formulaire en fonction des conditions de l'appel Ajax post-rendu, mais je ne sais pas comment résoudre ce problème car readOnly="false"< /code> est complètement différent de l'omission d'attributs.

L'exemple ci-dessous devrait illustrer ce que je veux, mais cela ne fonctionne pas.

(Erreur d'analyse : identifiant inattendu)

function MyInput({isRequired}) {
  return 
}
≪/pré>

Answer 1

La réponse de

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

Construisez un objet à votre goût :

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

if (condition) {
  inputProps.disabled = true;
}

Utilisez spread pour le rendu, et vous pouvez également choisir de transmettre d'autres accessoires.

<input
    value="这个值会被inputProps覆盖"
    {...inputProps}
    onChange={overridesInputProps}
 />

Answer 2

Apparemment, pour certaines propriétés, si la valeur transmise à React n'est pas une vraie valeur, React omettra intelligemment la propriété. Par exemple :

const InputComponent = function() {
    const required = true;
    const disabled = false;

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

Vous obtiendrez :

<input type="text" required>

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