Cómo renderizar una cadena de texto de varias líneas en React

Supongamos que tengo una cadena de texto que contiene saltos de línea y la renderizo así:

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

En HTML, los saltos de línea no se representan como saltos de línea. ¿Cómo debo hacer esto en React? No quiero convertir a <br>etiquetas y usar dangerouslySetInnerHTML. ¿Hay otra manera?

Podrías intentar poner divs para cada línea

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

O

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

Crea una nueva clase CSS

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

Muestra tu texto con esa clase CSS

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

Renders con saltos de línea (las secuencias de espacios en blanco se colapsarán en un solo espacio en blanco. El texto se ajustará cuando sea necesario). Me gusta esto:

One
Two
Three

También puede considerar la pre-envoltura. Más información aquí ( Propiedad de espacios en blanco CSS ).

Puede utilizar la propiedad CSS "white-space: pre". Creo que esta es la forma más fácil de manejar esto.

Aquí la solución más limpia (afaik):

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

En lugar de, también puede usar <div style={{whiteSpace:"pre"}}>, o cualquier otro elemento de bloque html (como spano pcon este atributo de estilo)

Renderice su texto delimitado "Mi línea uno \ nMi segunda línea \ nQué ..." dentro de un área de texto html normal. ¡Sé que funciona porque lo acabo de usar hoy! Haga que el área de texto sea readOnly si es necesario, y aplique el estilo correspondiente.

Puede usar -webkit-user-modify: read-write-plaintext-only;en su div. Formateará y comprenderá cosas como \ n y \ p, por ejemplo.

Puede hacer uso de la etiqueta textarea de html, luego puede agregar el estilo a la etiqueta textarea. Prácticamente resuelve todos sus problemas, incluidos los saltos de línea y los espacios de tabulación. Alegría ...

por ejemplo: su render se verá más abajo

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

Salida:

One
Two
Three

Prueba este

render() {
    var text = "One\nTwo\nThree";
    return <div style={{whiteSpace: 'pre-line'}}>{text}</div>;
}

En su lugar, puede ejecutar con seguridad String.raweste tipo de valor.

const text = String.raw`One
Two
Three
`

render() {
  return <div style={{ whiteSpace: "pre" }}>{text}</div>
}

También puede usar una <pre>etiqueta que efectivamente haga lo mismo, pero es menos clara semánticamente si ya la está usando para otros propósitos en su aplicación.

<div style={{ whiteSpace: "break-spaces" }}> {JSON.stringify(state, null, " ")} </div>