Question 1

Question 2

Вы могли попытаться поместить отделения для каждой строки

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>);
}

Question 3

Question 4

Здесь самое чистое решение (afaik):

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

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

Question 5

Представьте свой разделенный текст "Моя строка one\nMy второй line\nWhatevs..." в нормальной текстовой области HTML. Я знаю, что это работает, потому что я просто использовал его сегодня! Сделайте текстовую область только для чтения, если Вы должны, и разрабатывать соответственно.

Question 6

Сделайте новый класс 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).

stackdave · Accepted Answer · 31 October 2019 в 13:05