Comment passer des accessoires sans valeur pour le composant

Comment passer un pilier sans valeur à réagir composant?

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

Remarque - il n'y a pas de valeur par défaut prop valeurs spécifiées pour ces accessoires.

Je n'arrive pas à trouver des références sur ce point, mais en observant les valeurs de ces propriétés, ils sont assignés à true par défaut.

OriginalL'auteur code-jaff | 2016-06-15

36

Ce que vous êtes de passage est interprété par le compilateur comme un attribut booléen. Cela est également vrai lors de l'écriture de pur HTML; attributs sans valeurs sont interprétées comme une valeur booléenne true. Depuis JSX est syntaxique,-du sucre pour l'écriture de code HTML, il est logique qu'elle a le même comportement.

Officiel Réagir la documentation est la suivante:
Attributs Booléens

Cela revient souvent lors de l'utilisation des éléments de formulaire HTML, avec des attributs
comme désactivé, requis, vérifié et readOnly.
L'omission de la valeur d'un attribut causes JSX de la considérer comme vraie. Pour
col fausse un attribut doit être utilisé.

//Ces deux sont équivalent dans JSX pour la désactivation d'un bouton
```
<input type="button" disabled />;
<input type="button" disabled={true} />;
```
//Et ces deux sont équivalent dans JSX pour ne pas la désactivation d'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 })
);
```
Vérifier la babel démo de ce, ici.

Solution

Comme ctrlplusb dit, si vous souhaitez passer un "vide prop", vous pouvez simplement lui donner la valeur de null.

De sorte que vous pouvez faire:
```
<SomeComponent disableHeight={null}>
    {({width}) => (
        <AnotherComponent
            autoHeight={null}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>
```
Mais je remarque que c'est probablement tout à fait inutile car la lecture de this.props.autoHeight de AnotherComponent toujours de vous donner null, peu importe si vous l'avez explicitement passé comme autoHeight={null} ou pas du tout.

J'ai complètement raté la partie du document que je le pensais, c'est uniquement pour les booléens attribs comme disabled, required, etc... Merci pour la clarification.
Veuillez prendre soin de ne pas mélanger les attributs et les propriétés des DOM est HTMLElement interface. Réagir DOM travaille directement avec l'élément bien, qui en effet est un booléen, d'autant que le true/false. Mais un soi-disant HTML "attribut booléen" ne peut pas avoir la valeur true. Il peut être manquant pour indiquer false, ou pour indiquer true, il peut être présent aucune valeur, une valeur vide, "une valeur ASCII de la casse de match pour l'attribut canonique du nom sans espaces avant ni après." JSX a ses propres troisième ensemble de règles, qui ont été citées correctement.
Je pense que le point que ce billet essaie de souligner, c'est que JSX tente d'imiter HTML autant que possible. C'est une réponse à une assez novice question et il n'est pas nécessaire de compliquer à l'excès ce avec une telle explication approfondie. HTML n'est pas un langage de programmation, donc, les booléens et les autres types ne faites pas de sens de toute façon. Votre commentaire est apprécié, mais tout de développeurs expérimentés peuvent probablement lire entre les lignes sans problème.
JSX imite le balisage HTML, à certains égards, le DOM HTML interfaces dans d'autres façons. Je ne crois pas que les développeurs de facilement lire "entre les lignes" sur ce sujet. La relation entre le balisage et l'API DOM est une source fréquente de confusion. Idée fausse: "les booléens et les autres types n'ont pas de sens". DOM API utilise le typage fort (ce qui ne manifeste en JS), et la spécification HTML lui-même définit le "attribut booléen" ainsi que la façon dont il est associé à la (strictement boolean) DOM propriétés de l'interface. La nuance autour de taper & flux de HTML/DOM données est important pour de nombreux, certainement assez pour justifier un additif commentaire.
Oui, mais je le fais pas référence à l'api DOM. La seule comparaison faite ici entre les JSX les accessoires et les attributs de l'Élément, rien d'autre. J'ai l'impression que c'est de faire du hors contexte...

OriginalL'auteur Chris
8

Ouais JSX voit propriétés sans = comme étant une valeur booléenne vrai.

Une option est de simplement définir les valeurs null:
```
<Foo name="Bob" surname={null} />
```
Vous pouvez également créer dynamiquement un sac de propriété par l'intermédiaire d'un objet et d'ajouter uniquement les propriétés si nécessaire. Par exemple:
```
render() {
  const propBag = {
    width: width,
    height: 300
  };
  if (someCondition) {
    propBag.something = 'bob';
  }

  return (
    <FooComponent {...propBag} {..otherProps} />
  );
}
```
OriginalL'auteur ctrlplusb
1

TL;DR: Ensemble chaîne vide:
```
<Amp.AmpAccordion animate="">
```
Explication

Un copier+coller à partir du lien ci-dessus:
Tout attribut avec une chaîne vide sera rendu dans les DOM sans valeur.

W3C de la documentation pertinente: https://www.w3.org/TR/html5/syntax.html#elements-attributes

Vide de la syntaxe d'attribut

Juste le nom de l'attribut. La valeur est implicitement la chaîne vide.
Dans l'exemple suivant, les handicapés attribut est donné avec le vide de la syntaxe d'attribut:

<input disabled>
Si un attribut à l'aide de l'attribut vide syntaxe est d'être suivi par un autre attribut, alors il doit y avoir un espace de caractère qui sépare les deux.
OriginalL'auteur ghashi

Vous devez vous connecter pour publier un commentaire.

Attributs Booléens

Exemple

Solution

TL;DR: Ensemble chaîne vide:

Explication