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

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>

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>

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;
}

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.

J'ai tendance à utiliser  

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.

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

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

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

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  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 & goodbye '}n'est pas le cas.

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;'}} />

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

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

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

A<span style={{paddingLeft: '20px'}}>B</span>