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

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

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

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

Ответы

Ответ 1

Вы можете попробовать поставить 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>);
}

Ответ 2

Создайте новый 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 пробел).

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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