Как отрендерить многострочную текстовую строку в React

Предположим, у меня есть текстовая строка, содержащая разрывы строк, и я визуализирую ее так:

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

В HTML разрывы строк не отображаются как разрывы строк. Как мне это сделать в React? Я не хочу конвертировать в <br>теги и использовать dangerouslySetInnerHTML. Есть другой способ?

Вы можете попробовать разместить div для каждой строки

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

Или же

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

Создайте новый CSS-класс

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

Отобразите свой текст с помощью этого CSS-класса

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

Визуализирует с переносом строки (последовательности пробелов превращаются в один пробел. Текст при необходимости переносится). Как это:

One
Two
Three

Вы также можете рассмотреть возможность предварительной упаковки. Подробнее здесь ( свойство CSS white-space ).

Вы можете использовать свойство CSS «white-space: pre». Думаю, это самый простой способ справиться с этим.

Вот самое чистое решение (афаик):

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

Вместо этого вы также можете использовать <div style={{whiteSpace:"pre"}}>любой другой элемент блока html (например, spanили pс этим атрибутом стиля)

Попробуй это,

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

Визуализируйте текст с разделителями «Моя первая строка \ nМоя вторая строка \ nWhatevs ...» внутри обычного текстового поля html. Я знаю, что это работает, потому что использовал его только сегодня! Сделайте textarea доступным только для чтения, если необходимо, и задайте соответствующий стиль.

Вы можете использовать -webkit-user-modify: read-write-plaintext-only;в своем div. Например, он будет форматировать и понимать такие вещи, как \ n и \ p.

Вы можете использовать тег textarea HTML, позже вы можете добавить стиль к тегу textarea. Это в значительной степени решает все ваши проблемы, включая разрывы строк и пробелы. Cheerzz ...

например: ваш рендер будет выглядеть примерно так, как показано ниже

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

Вывод:

One
Two
Three

String.rawВместо этого вы можете безопасно работать с этим типом значения.

const text = String.raw`One
Two
Three
`

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

Вы также можете просто использовать <pre>тег, который фактически делает то же самое, но его семантически менее понятно, если вы уже используете его для других целей в своем приложении.

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