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é>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
La réponse de
juandemarcoest 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.
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 ( ); }Vous obtiendrez :
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 et167du fichierDOMProperty.js.