2
votes

React supprime les espaces

Voici une liste d'éléments span

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
      </div>
    );
  }
}

export default App;

Et le style css pour ces éléments:

span{
  background: red;
}

Le résultat est différent dans l'application React et fichiers html + css locaux.

Lien vers Codepan https://codepen.io / Letsrock / pen / morogX

Comme vous pouvez le voir sur les captures d'écran:

Comment faire React pour afficher ces espaces entre les éléments?

Voici le composant React:

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>

javascript reactjs css

3 commentaires

pouvez-vous inclure votre composant de réaction s'il vous plaît?

Veuillez ajouter votre code React.JS.

Ajout du code du composant de réaction. Le fichier App.css est le même que le code sur Codepan

3 Réponses :

1
votes

Il s'agit du comportement attendu de React. https://github.com/facebook/react/issues/1643

Vous pouvez ajouter un espace de texte vide entre chaque plage.

<span>1</span>
{' '}
<span>2</span>

3 commentaires

Le problème est que dans mon vrai projet, j'ai beaucoup d'éléments là où j'ai besoin de ces espaces, et j'ai du mal à les mettre à la main

Si vous voulez juste un espace vide, pourquoi ne pas utiliser la marge?

Parce que les modèles de site Web n'ont pas été créés sur React et que je ne connaissais pas ce problème avec les espaces blancs dans React

0
votes

Ajouter ceci à App.css devrait fonctionner

span {
  background: red;
  margin-left: 2px;
}

Il utilise margin pour faire l'affaire. Ajustez sa valeur selon vos besoins.

2 commentaires

Je connais ce correctif, et je dois l'ajouter à chaque composant où j'utilise inline-block, et il y a trop de composants pour les réparer à la main

où importez-vous App.css? Il devrait s'appliquer à tous les composants span si vous l'importez dans votre fichier d'entrée index.js

0
votes

Ajoutez ce css dans votre App.css :

Solution A:

<div>
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>

span {
  background: red;
}

span:before {
  content: " ";
}

Solution B:

<div>
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>

span {
  background: red;
  margin-right: 5px;
}

0 commentaires