Parce  
que 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>