web-dev-qa-db-fra.com

Comment passer des accessoires sans valeur au composant

Comment passer un accessoire sans valeur à un composant réactif?

<SomeComponent disableHeight> {/* here */}
    {({width}) => (
        <AnotherComponent
            autoHeight {/* and here */}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

Remarque - aucune valeur par défaut pour les accessoires n'est spécifiée pour ces accessoires.

Je n'arrive pas à trouver de références à ce sujet, mais en observant les valeurs de ces propriétés, elles sont attribuées à true par défaut.

javascriptreactjsreact-jsx
26
code-jaff

Ce que vous transmettez est interprété par le compilateur comme un attribut booléen. Cela vaut également pour l'écriture de code HTML pur; les attributs sans valeurs sont interprétés comme un booléen true. Étant donné que JSX est un sucre syntaxique pour écrire du HTML, il est logique qu'il ait le même comportement.

L'officiel documentation React a ce qui suit:

Attributs booléens

Cela se produit souvent lorsque vous utilisez des éléments de formulaire HTML, avec des attributs comme désactivé, obligatoire, vérifié et en lecture seule. L'omission de la valeur d'un attribut fait que JSX le traite comme vrai. Pour passer false, une expression d'attribut doit être utilisée.

// Ces deux sont équivalents dans JSX pour désactiver un bouton

<input type="button" disabled />;
<input type="button" disabled={true} />;

// Et ces deux sont équivalents dans JSX pour ne pas désactiver un bouton

<input type="button" />;
<input type="button" disabled={false} />;

Exemple

JSX: 

<div>
  <Component autoHeight />
  <AnotherComponent autoHeight={null} />
</div>

JS: 

React.createElement(
  "div",
  null,
  React.createElement(Component, { autoHeight: true }),
  React.createElement(AnotherComponent, { autoHeight: null })
);

Consultez la démo babel de cela, ici .

Solution

Comme l'a indiqué ctrlplusb, si vous voulez passer un "accessoire vide", vous pouvez simplement lui donner la valeur de null ou même undefined.

Vous pourriez donc faire:

<SomeComponent disableHeight={null}>
    {({width}) => (
        <AnotherComponent
            autoHeight={null}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

Bien que je note que le passer comme undefined est probablement tout à fait inutile car lire this.props.autoHeight de AnotherComponent vous donnera toujours undefined, que vous l'ayez explicitement passé comme autoHeight={undefined} ou pas du tout. Passer null est probablement mieux dans de tels cas puisque vous passez explicitement l'accessoire en déclarant qu'il a la valeur ... "no value" (c'est-à-dire null).

50
Chris

Ouais JSX voit des propriétés sans = comme étant un booléen vrai.

Une option consiste à simplement définir des valeurs nulles:

<Foo name="Bob" surname={null} />

Vous pouvez également créer dynamiquement un sac de propriétés via un objet et n'ajouter les propriétés que si nécessaire. Par exemple:

render() {
  const propBag = {
    width: width,
    height: 300
  };
  if (someCondition) {
    propBag.something = 'bob';
  }

  return (
    <FooComponent {...propBag} {..otherProps} />
  );
}
9
ctrlplusb

TL; DR: Définir une chaîne vide :

<Amp.AmpAccordion animate="">

Explication

Un copier + coller du lien ci-dessus:

Tout attribut avec une chaîne vide sera rendu dans le DOM sans valeur.

Documentation pertinente du W3C: https://www.w3.org/TR/html5/syntax.html#elements-attributes

Syntaxe d'attribut vide
Juste le nom de l'attribut. La valeur est implicitement la chaîne vide.

Dans l'exemple suivant, l'attribut désactivé est donné avec la syntaxe d'attribut vide:

<entrée désactivée>

Si un attribut utilisant la syntaxe d'attribut vide doit être suivi d'un autre attribut, il doit y avoir un caractère espace séparant les deux.

1
ghashi