Bonnes pratiques lors de l'ajout d'espaces dans JSX


91

Je comprends comment (et pourquoi ) ajouter un espace dans JSX, mais je me demande quelles sont les meilleures pratiques ou si elles font une réelle différence?

Enveloppez les deux éléments dans une travée

<div className="top-element-formatting">
  <span>Hello </span>
  <span className="second-word-formatting">World!</span>
</div>

Ajoutez-les sur une seule ligne

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
  </div>

Ajouter de l'espace avec JS

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-word-formatting">World!</span>
</div>

1
Vous n'avez pas besoin de la durée supplémentaire, React a corrigé des problèmes de longue date avec les nœuds de texte et votre deuxième exemple convient
Dominic

1
Je ne sais pas s'il existe une «meilleure pratique» définie - vous n'avez certainement pas besoin de tout envelopper dans des <span>balises, mais je suis généralement simplement des pratiques HTML génériques lorsque je me soucie des espaces blancs.
arthurakay

Réponses:


104

Parce &nbspque vous avez des espaces insécables, vous ne devez l'utiliser que lorsque cela est nécessaire. Dans la plupart des cas, cela aura des effets secondaires indésirables.

Les anciennes versions de React, je crois que toutes celles antérieures à la v14, s'inséraient automatiquement <span> </span>lorsque vous aviez une nouvelle ligne à l'intérieur d'une balise.

Bien qu'ils ne le fassent plus, c'est un moyen sûr de gérer cela dans votre propre code. À moins que vous n'ayez un style qui cible spécifiquement span(mauvaise pratique en général), c'est la voie la plus sûre.

Selon votre exemple, vous pouvez les mettre sur une seule ligne car c'est assez court. Dans les scénarios à plus long terme, voici comment vous devriez probablement le faire:

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    <span> </span>
    So much more text in this box that it really needs to be on another line.
  </div>

Cette méthode est également sûre contre les éditeurs de texte à découpage automatique.

L'autre méthode utilise {' '}qui n'insère pas de balises HTML aléatoires. Cela pourrait être plus utile lors de la mise en forme, de la mise en évidence d'éléments et de la suppression de l'encombrement du DOM. Si vous n'avez pas besoin de rétrocompatibilité avec React v14 ou version antérieure, cela devrait être votre méthode préférée.

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    {' '}
    So much more text in this box that it really needs to be on another line.
  </div>

10

Vous pouvez utiliser la propriété css white-space et la définir pour qu'elle soit pré-enveloppée dans l'élément div englobant.

div {
     white-space: pre-wrap;
}

Si le conteneur est flexible, vous aurez besoin de cette solution.
Curtis

C'est le seul non-& nbsp; solution qui a fonctionné pour moi!
Magnus

@Magnus De rien, mon homme. Aucune des solutions à cette réponse n'a réellement fonctionné pour mon cas particulier.
i_code

10

Vous pouvez ajouter un espace blanc simple avec le signe des guillemets: {" "}

Vous pouvez également utiliser des littéraux de modèle , qui permettent d'insérer, d'incorporer des expressions (code entre accolades):

`${2 * a + b}.?!=-` // Notice this sign " ` ",its not normal quotes.

Dans quelle version de React cela fonctionne-t-il pour vous? 15.6.2 semble ignorer cela.
smhg

1
@smhg yo. cela ne dépend pas de la version de react. son feautere d'ecmascript, dactylographié. Vous pouvez taper votre modèle dans la console Chrome pour tester si votre temlate est correct. Le problème peut également être dans vos paramètres babel.
Vasyl Gutnyk

1
Vous confondez les littéraux de modèle avec les expressions JSX. Pour ajouter un espace via JSX, mettez simplement une chaîne composée d'un caractère d'espace dans une expression JSX . Le moyen le plus simple de le faire est {' '}. Vous n'avez pas besoin de littéraux de modèle pour cela, bien qu'ils fonctionnent (et c'est le cas {" "}).
Dan Dascalescu

vous, c'était une faute de frappe un peu déroutante - corrigé. Quoi qu'il en soit, je suis sûr que 99,9% des gens ici recherchent des modèles littéraux :)
Vasyl Gutnyk

6

J'ai tendance à utiliser &nbsp;

Ce n'est pas joli mais c'est le moyen le moins déroutant d'ajouter des espaces que j'ai trouvé et cela me donne un contrôle absolu sur la quantité d'espaces que j'ajoute.

Si je veux ajouter 5 espaces:

Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="second-word-formatting">World!</span>

Il est facile d'identifier exactement ce que j'essaie de faire ici quand je reviens au code des semaines plus tard.


6
Je ne peux pas imaginer en pratique ce que serait une utilisation de 5 espaces insécables qui ont du sens typographiquement, mais mis à part ce cas, c'est une mauvaise utilisation en pratique. Si vous l'utilisez pour la mise en page, vous devriez utiliser CSS à la place et si vous avez besoin d'ajouter un espace mais que vous ne l'exigez pas pour être insécable, il existe de nombreux autres espaces qui ont plus de sens typographique. Voir cette question, par exemple: stackoverflow.com/questions/8515365/…
guioconnor

1
@guioconnor essayez d'étendre votre imagination et pensez à une application d'édition, par exemple vscode, et vous constaterez que cela a un sens typographique complet: D.
Dan

5

Vous n'avez pas besoin d'insérer &nbsp;ou d'emballer votre espace supplémentaire avec <span/>. Utilisez simplement le code d'entité HTML pour l'espace -&#32;

Insérer un espace régulier comme entité HTML

<form>
  <div>Full name:</span>&#32;
  <span>{this.props.fullName}</span>
</form>

Note latérale: aujourd'hui, je suis tombé sur cela car plus joli cassait mon code en formatant l'entité spatiale. Lorsque vous utilisez {""}, il fonctionne sur une ligne par lui-même et ne se cassera pas.
gorhawk

J'arrivais juste pour ajouter ceci à ma propre réponse. J'ai plutôt voté pour le vôtre.
undefined le

5

J'ai essayé de penser à une bonne convention à utiliser pour placer du texte à côté de composants sur différentes lignes, et j'ai trouvé quelques bonnes options:

<p>
    Hello {
        <span>World</span>
    }!
</p>

ou

<p>
    Hello {}
    <span>World</span>
    {} again!
</p>

Chacun de ces produits produit un code HTML propre sans &nbsp;balisage supplémentaire ou autre. Il crée moins de nœuds de texte que l'utilisation {' '}et permet d'utiliser des entités html là où ce {' hello &amp; goodbye '}n'est pas le cas.


3

Vous pouvez utiliser des accolades comme expression avec des guillemets doubles et simples pour l'espace, c'est-à-dire,

{" "} or {' '}

Vous pouvez également utiliser des littéraux de modèle ES6, c'est-à-dire

`   <li></li>` or `  ${value}`

Vous pouvez également utiliser & nbsp comme ci-dessous (à l'intérieur de la plage)

<span>sample text &nbsp; </span>

Vous pouvez également utiliser & nbsp dans dangerouslySetInnerHTML lors de l'impression de contenu html

<div dangerouslySetInnerHTML={{__html: 'sample html text: &nbsp;'}} />

2

utilisez {} ou {``} ou&nbsp; pour créer un espace entre l'élément span et le contenu.

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>

1
nbsp = Espace non cassable, qui est un caractère unicode différent de l'espace normal et limite les sauts de ligne. Parfois, c'est souhaitable, en soulignant simplement que ce n'est pas équivalent aux autres options.
Beni Cherniavsky-Paskin le

1

Si le but est de séparer deux éléments, vous pouvez utiliser CSS comme ci-dessous:

A<span style={{paddingLeft: '20px'}}>B</span>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.