web-dev-qa-db-fra.com

Comment rendre une chaîne de texte multiligne dans React

Supposons que j'ai une chaîne de texte contenant des sauts de ligne et que je la rende comme ceci:

render() {
    var text = "One\nTwo\nThree";
    return <div>{text}</div>;
}

En HTML, les sauts de ligne ne sont pas rendus comme des sauts de ligne. Comment dois-je faire cela dans React? Je ne veux pas convertir en tags <br> et utiliser dangerouslySetInnerHTML. Y a-t-il un autre moyen?

reactjs
47
Aaron

Vous pouvez essayer de mettre des divs pour chaque ligne

render() {
    return (<div>
        <div>{"One"}</div>
        <div>{"Two"}</div>
        <div>{"Three"}</div>
    </div>);
}

Ou

render() {
    var text = "One\nTwo\nThree";
    return (
    <div>
        {text.split("\n").map((i,key) => {
            return <div key={key}>{i}</div>;
        })}
    </div>);
}
44
Sergio Flores

Faire une nouvelle classe CSS 

.display-linebreak {
  white-space: pre-line;
}

Affichez votre texte avec cette classe CSS

render() {
  const text = 'One \n Two \n Three';
  return ( 
     <div className="display-linebreak"> 
        {text} 
     </div>
  );
}

Les rendus avec des sauts de ligne (les séquences d'espaces se réduisent en un seul espace. Le texte est mis à la ligne si nécessaire) Comme ça:

One
Two
Three

Vous pouvez également envisager de pré-enveloppement. Plus d'infos ici http://www.w3schools.com/cssref/pr_text_white-space.asp

126
andersvold

Vous pouvez utiliser la propriété CSS "white-space: pre". Je pense que c'est le moyen le plus simple de gérer cela.

12
Brick Yang

Voici la solution la plus propre (autant que je sache):

   render(){
      return <pre>
             Line 1{"\n"}
             Line 2{"\n"}
             Line 3{"\n"}
      </pre>
   }

Au lieu de cela, vous pouvez également utiliser <div style={{whiteSpace:"pre"}}> ou tout autre élément de bloc HTML (comme span ou p avec cet attribut de style).

1
Philipp Munin

Rendez votre texte délimité "Ma première ligne\nMa deuxième ligne\nWhatevs ..." à l'intérieur d'une zone de texte HTML normale. Je sais que cela fonctionne parce que je viens de l'utiliser aujourd'hui! Rendez textarea readOnly si vous devez et modifiez-le en conséquence.

0
joedotnot