Реагировать на разрывы строк отображения из сохраненного текстового поля

Используя Facebook React. На странице настроек у меня есть textareaмногострочный текст, где пользователь может ввести многострочный текст (в моем случае адрес).

<textarea value={address} />

Когда я пытаюсь отобразить адрес, например {address}, он не показывает разрывы строк и все находится в одной строке.

<p>{address}</p>

Есть идеи, как это решить?

Нет причин использовать JS. Вы можете легко указать браузеру, как обрабатывать новую строку, используя white-spaceсвойство CSS:

white-space: pre-line;

предварительная линия

Последовательности пробелов сворачиваются. Строки разбиваются на символы новой строки, на <br>и по мере необходимости для заполнения строчных полей.

Посмотрите эту демонстрацию:

<style>
  #p_wrap {
    white-space: pre-line;
  }
</style>

<textarea id="textarea"></textarea>
<p id="p_standard"></p>
<hr>
<p id="p_wrap"></p>
<script>
  textarea.addEventListener('keypress', function(e) {
    p_standard.textContent = e.target.value
    p_wrap.textContent = e.target.value
  })
</script>

Этого и следовало ожидать, вам нужно будет преобразовать символы новой строки (\ n) в разрывы строк HTML.

Статья об использовании в React : React Newline to break (nl2br)

Процитировать статью:

Поскольку вы знаете, что все в React - это функции, вы не можете этого сделать.

this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />')

Поскольку это вернет строку с узлами DOM внутри, это также недопустимо, потому что это должна быть только строка.

Затем вы можете попробовать сделать что-то вроде этого:

{this.props.section.text.split(“\n”).map(function(item) {
  return (
    {item}
    <br/>
  )
})}    

Это также недопустимо, потому что React снова представляет собой чистые функции, и две функции могут быть рядом друг с другом.

tldr. Решение

{this.props.section.text.split(“\n”).map(function(item) {
  return (
    <span>
      {item}
      <br/>
    </span>
  )
})}

Теперь мы оборачиваем каждый разрыв строки в span, и это отлично работает, потому что у span есть отображение inline. Теперь у нас есть работающее решение для переноса строки в nl2br

Решение состоит в том, чтобы установить свойство white-spaceв элементе, отображающем содержимое вашего textarea:

white-space: pre-line;

Предыдущее предложение Пита с автономным компонентом - отличное решение, хотя оно упускает одну важную вещь. Спискам нужны ключи . Я немного поправил, и моя версия (без предупреждений консоли) выглядит так:

const NewLineToBr = ({ children = '' }) => children.split('\n')
  .reduce((arr, line, index) => arr.concat(
    <Fragment key={index}>
      {line}
      <br />
    </Fragment>,
  ), [])

Он использует фрагменты React 16

Начиная с React 16 компонент может возвращать массив элементов, что означает, что вы можете создать такой компонент:

export default function NewLineToBr({children = ""}){
  return children.split('\n').reduce(function (arr,line) {
    return arr.concat(
      line,
      <br />
    );
  },[]);
}

который вы бы использовали вот так:

<p>
  <NewLineToBr>{address}</NewLineToBr>
</p>

Люблю версию webit. Я не знал о компоненте «Фрагмент», он очень полезен. Однако нет необходимости использовать метод уменьшения. Карты достаточно. Кроме того, списку нужны ключи в реакции, но использовать для него индекс из метода итерации - плохая привычка. eslint продолжал разбивать это в моем предупреждении, пока у меня не возникла ошибка путаницы. Так это выглядело бы так:

const NewLine = ({ children }) =>
   children.split("\n").map(line => (
    <Fragment key={uuidv4()}>
      {line}
      <br />
    </Fragment>
  ));