web-dev-qa-db-fra.com

Meilleure pratique lors de l'ajout d'espaces dans JSX

Je comprends comment (et pourquoi ) l’ajout d’un espace dans JSX, mais je me demande quelle est la meilleure pratique ou s’il en existe de véritables différences

Enveloppe les deux éléments dans un span

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

Ajoutez-les sur une 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>
javascriptreactjsreact-jsx
29
worker11811

Étant donné que &nbsp vous oblige à avoir des espaces insécables, vous ne devriez l'utiliser que là où c'est nécessaire. Dans la plupart des cas, cela aura des effets secondaires inattendus.

Les anciennes versions de React, je pense que toutes les versions antérieures à la v14, insèrent automatiquement <span> </span> lorsque vous avez 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 le style ne cible spécifiquement la variable span (mauvaise pratique en général), il s'agit de la route la plus sûre.

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

  <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 protégée contre les éditeurs de texte à découpe automatique.

L'autre méthode utilise {' '} qui n'insère pas de balises HTML aléatoires. Cela pourrait être plus utile lors du style, de la mise en surbrillance des éléments et de la suppression de l'encombrement du DOM. Si vous n'avez pas besoin de la compatibilité ascendante avec React v14 ou une version antérieure, utilisez cette méthode.

  <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>
34
Sawtaytoes

Vous pouvez utiliser template literals :

{` `} // Notice this sign " ` ",its not normal quotes.

Nous pouvons utiliser des littéraux avec des expressions (code entre accolades):

`${2 * a + b}.?!=-`
7
Vasyl Gutnyk

J'ai tendance à utiliser &nbsp;

Ce n'est pas joli, mais c'est la façon la moins déroutante d'ajouter des espaces que j'ai trouvés et cela me donne un contrôle absolu sur les 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 lorsque je reviens au code quelques semaines plus tard.

7
Daniel Murawsky

Vous pouvez utiliser des accolades comme une expression avec des guillemets doubles et des guillemets simples pour les espaces i.e.,

{" "} or {' '}

Vous pouvez également utiliser des littéraux de modèle ES6, à savoir, 

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

Vous pouvez également utiliser & nbsp comme ci-dessous

<span>sample text &nbsp; <span>

Vous pouvez également utiliser & nbsp dans dangerouslySetInnerHTML lorsque vous imprimez du contenu HTML.

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

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

Insérer un espace normal en tant qu'entité HTML 

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

J'ai essayé de trouver 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>

Chacune de celles-ci produit du code HTML propre sans &nbsp; ni autre balise superflue. Il crée moins de nœuds de texte que d'utiliser {' '} et permet d'utiliser des entités HTML où {' hello &amp; goodbye '} fait n

0
undefined

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>
0
KARTHIKEYAN.A