web-dev-qa-db-fra.com

React attribut de composant conditionnel en ligne

J'ai cherché partout et je ne trouve pas de réponse à ma question. Je veux donc un attribut conditionnel qui ne s'affiche que sous certaines conditions, exemple:

<Button {this.state.view === 'default' && 'active'}></Button>

Comme vous pouvez le voir, je veux seulement indiquer le bouton actif si le this.state.view est égal à la valeur par défaut. Cependant, je reçois Unexpected token, error...

Mais quand j'essaie de mettre un attribut avant, par exemple:

<Button isActive={this.state.view === 'default' && 'active'}></Button>

Il passe l'erreur de syntaxe et s'affiche très bien mais ce n'est pas ce que je voulais réaliser.

Comment puis-je réparer cela? Et quelle pourrait être la raison pour laquelle cela ne passe pas?

METTRE À JOUR

J'ai donc découvert qu'en react-bootstrap la propriété active est un raccourci de active=true donc je l'ai résolu en utilisant

<Button active={this.state.view === 'default'}></Button>

Donc, au cas où quelqu'un rencontre ce problème, je le laisse ici. Cependant, je veux toujours savoir pourquoi l'attribut conditionnel échoue sans l'enfermer dans une syntaxe de type accessoire, exemple:

Ce:

active={this.state.view === 'default'}

Versus

{this.state.view === 'default' && 'active'}
javascriptreactjsjsxreact-bootstrap
8
JohnnyQ

Tout d'abord, JSX est juste un sucre syntaxique pour React.createElement . Donc, cela peut ressembler à , mais, en réalité, vous ne spécifiez pas html attributes: en fait, vous passez toujours props.

Par exemple, le code JSX <input type="button" value="My button" /> Est transposé en React.createElement('input',{type:'button',value:'My Button'}). Et, si nécessaire, le moteur React rend ce React Element Au DOM en tant qu'élément HTML.

Cela dit, nous avons que JSX transpile un prop sans valeur comme true (check docs ). Par exemple: <Button active></Button> Est transposé en React.createElement(Button, { active: true });.

Mais, nous savons que la spécification HTML5 n'accepte pas attribute=true (Comme indiqué ici ). Par exemple: <button disabled=true></button> N'est pas valide. Le correct est <button disabled></button>.

Donc, pour rendre l'élément HTML au DOM, React ne considère que props qui sont valides attributes (sinon, l'attribut n'est pas rendu). Check tous les attributs html pris en charge . Et puis, enfin, s'il s'agit d'un attribut booléen, il supprime la valeur true/ false, le rendre correctement.

Par exemple: <button active={true}></button> Est transposé en React.createElement("button", { active: true }); puis React est rendu dans le DOM <button></button>, Car il n'y a pas de active attribut dans la spécification HTML pour la balise <button/> (ne figure pas dans la liste des attributs pris en charge).

Mais <button disabled={true}></button> Est transposé en React.createElement("button", { disabled: true }); et React est rendu au DOM <button disabled></button>.

Je viens de le dire pour clarifier votre cas.

Vous essayez de passer un accessoire active au composant Button (la première lettre en majuscule signifie que c'est un composant React: il y a un React Composant appelé Button géré quelque part dans votre code).

Cela signifie:

<Button active></Button> Est transposé en React.createElement(Button, { active: true });

et

<Button active={true}></Button> Est transposé en React.createElement(Button, { active: true });

La même chose!

Donc, si vous voulez faire un prop conditionnel, vous pouvez simplement faire quelque chose comme ça:

<Button active={this.state.view === 'default'}></Button>

Vous avez une condition entre parenthèses. Signifie que, si votre this.state.view Est égal à default (vrai), active prop sera transmis au composant avec la valeur true. Si différent, avec la valeur false.

Button Le composant doit donc en quelque sorte gérer ce active prop. Il peut restituer l'élément button et, par exemple, changer son style, passer la prop disabled ... J'ai créé un violon pour le démontrer: https: // jsfiddle. net/mrlew/5rsx40gu /

21
mrlew

En fait, je suppose que c'est une question en double à laquelle j'ai répondu en ce lien il y a parfois. pour ce poste spécifique, il n'y a pas besoin de condition prop pour une valeur booléenne, car cela fonctionne bien comme ci-dessous:

const { booleanValue } = this.props;
return (
    <input checked={booleanValue} />
);

Ou créez votre propre valeur booléenne:

const booleanValue = someThing === someOtherThing;
return (
    <input checked={booleanValue} />
);

Les deux fonctionnent bien, car lorsque le booleanValue est false, react ne voit pas le active prop, donc il n'existe pas, sauf si vous passez checked prop à un composant spécifique pour que le composant reçoive une fausse prop vérifiée de this.props.

Mais , si vous voulez avoir un accessoire sur votre composant spécifique avec une condition et si la condition retourne false vous ne le voulez pas, il y a deux façons , J'aime la seconde:

Première:

<Component someProp={condition ? yourValue : undefined} />

Seconde:

<Component {...(condition && { someProp: yourValue })} />
5
AmerllicA

Dans JSX, les propriétés (ou accessoires) des composants se compilent en un objet JavaScript simple. Les noms des accessoires sont utilisés comme clés de l'objet et les valeurs des accessoires sont stockées sous ces clés. Le premier exemple des documents JSX fait un excellent travail pour le démontrer. Dans ton cas {view === 'default' && true} est une valeur brute sans nom d'accessoire associé. Sans nom d'accessoire à utiliser comme clé (spécifié par la syntaxe name=), JSX n'a ​​nulle part où mettre cette valeur dans l'objet props final.

Cependant, JSX acceptera les accessoires via votre syntaxe d'origine si l'expression à l'intérieur des accolades est évaluée en un objet. Par exemple, vous pouvez faire {{ active: view === "default" }}. Dans ce cas, JSX peut obtenir à la fois la clé et la valeur dont il a besoin de l'objet fourni, donc pas de active= est nécessaire.

2
Elliot