Як відобразити багаторядковий текстовий рядок у React

Припустимо, у мене є текстовий рядок, який містить розриви рядків, і я відображаю його так:

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

У HTML розриви рядків не відображаються як розриви рядків. Як мені це зробити в React? Я не хочу перетворювати на <br>теги та використовувати dangerouslySetInnerHTML. Чи є інший спосіб?

Ви можете спробувати поставити divs для кожного рядка

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 ).

Ви можете використовувати властивість CSS "white-space: pre". Я думаю, що це найпростіший спосіб з цим впоратися.

Ось найчистіше рішення (afaik):

   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Мой другий рядок \ nWhatvs ..." всередині звичайного HTML-тексту. Я знаю, що це працює, бо я щойно цим користувався! Зробіть текстове поле readOly, якщо потрібно, і відповідно оформіть стиль.

Ви можете використовувати -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>