Comment ajouter conditionnellement des composants aux composants React?

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

Je suis censé ajouter les 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 ceci car readOnly = "false" n'est pas le même que l'omission de l'attribut complètement.

L'exemple ci-dessous devrait expliquer ce que je veux, mais ne fonctionnera pas (Analyse d'erreur: 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 assez intelligent pour omettre l'attribut si la valeur que vous lui transmettez n'est pas une vérité. 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 data-reactid=".0.0">

Il suffit de jeter une autre option, mais la réponse de @ juandemarco est habituellement correcte.

Créez un objet comme vous le souhaitez:

 var inputProps = { value: 'foo', onChange: this.handleChange }; if (condition) inputProps.disabled = true;

Rendre avec la propagation, éventuellement passer d'autres accessoires aussi.

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

Voici un exemple d'utilisation du Button Bootstrap via React-Bootstrap .

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

Fin de la fête. 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 } ) } /> );

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

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

Cela devrait fonctionner, puisque votre état changera après l'appel ajax, et le composant parent sera redistribué.

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

Compte tenu de cette publication https://facebook.github.io/react/tips/if-else-in-JSX.html, vous pouvez résoudre votre problème de cette façon

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