Atsortingbut dynamic dans ReactJS

La méthode la plus propre pour append des atsortingbuts facultatifs (y compris ceux disabled et ceux que vous souhaitez peut-être utiliser) consiste actuellement à utiliser les atsortingbuts de propagation JSX :

 var Hello = React.createClass({ render: function() { var opts = {}; if (this.props.disabled) { opts['disabled'] = 'disabled'; } return Hello {this.props.name}; } }); React.render((
  
) , document.getElementById('container')); 

En utilisant des atsortingbuts de propagation, vous pouvez append (ou remplacer) dynamicment tous les atsortingbuts que vous souhaitez en utilisant une instance d’object javascript. Dans mon exemple ci-dessus, le code crée une clé disabled (avec une valeur disabled dans ce cas) lorsque la propriété disabled est transmise à l’instance du composant Hello .

Si vous voulez seulement utiliser disabled , cette réponse fonctionne bien.

Vous pouvez transmettre un booléen à l’atsortingbut disabled .

 render: function() { return Clear cart } 

J’utilise React 16 et cela fonctionne pour moi (où bool est votre test):

Fondamentalement, basé sur le test ( bool ), vous retournez un object avec l’atsortingbut ou vous retournez un object vide.

De plus, si vous devez append ou omettre plusieurs atsortingbuts, vous pouvez le faire:

Pour les atsortingbuts plus complexes gérés, je vous suggère de préfabriquer l’object avec (ou sans) les atsortingbuts en dehors de JSX.

Une façon plus propre de faire des atsortingbuts dynamics qui fonctionne pour tous les atsortingbuts est

 function dynamicAtsortingbutes(atsortingbute, value){ var opts = {}; if(typeof value !== 'undefined' && value !== null) { opts['"'+atsortingbute+'"'] = value; return opts; } return false; }; 

Appelez votre composant de réaction comme suit

Conseils :

1. Vous pouvez avoir la fonction dynamicAtsortingbutes dans un lieu / utilitaire commun et l’importer pour l’utiliser sur tous les composants

2. vous pourriez passer la valeur comme null pour ne pas rendre l’atsortingbut dynamic

Vous pouvez trouver quelque chose de similaire à la documentation.

https://facebook.github.io/react/docs/transferring-props.html

Dans ton cas pourrait être quelque chose comme ça

 function MyComponent(props) { let { disabled, ...attrs } = props; if (disabled) { // thus, it will has the disabled atsortingbute only if it // is disabled attrs = { ...attrs, disabled: true } }; return ( MyLabel ) } 

Ce code utilise ES6, mais je pense que vous avez l’idée.

C’est cool car vous pouvez transmettre beaucoup d’autres atsortingbuts à ce composant et cela fonctionnera toujours.

La version que j’ai utilisée était:

  Click me (or dont)  

Cela pourrait fonctionner, le problème avec les handicapés est que l’on ne peut pas simplement définir booléen pour cela.

 if(AppStore.cartIsEmpty()){ return "Clear cart" } else { return "Clear cart" }