저장된 텍스트 영역에서 표시 줄 바꿈 반응

저장된 텍스트 영역에서 표시 줄 바꿈 반응

---

Facebook 사용 React. 설정 페이지 textarea에는 사용자가 여러 줄 텍스트 (제 경우에는 주소)를 입력 할 수있는 여러 줄이 있습니다.

<textarea value={address} />

주소를 표시하려고 할 때와 같이 {address}줄 바꿈이 표시되지 않고 모두 한 줄에 있습니다.

<p>{address}</p>

이것을 해결하는 방법에 대한 아이디어가 있습니까?

---

JS를 사용할 이유가 없습니다. white-spaceCSS 속성을 사용하여 새 줄을 처리하는 방법을 브라우저에 쉽게 알릴 수 있습니다 .

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 Newline to break (nl2br)

To quote article:

Because you know that everything in React is functions, you can't really do this

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

Since that would return a string with DOM nodes inside, that is not allowed either, because has to be only a string.

You then can try do something like this:

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

That is not allowed either because again React is pure functions and two functions can be next to each other.

tldr. Solution

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

Now we're wrapping each line-break in a span, and that works fine because span’s has display inline. Now we got a working nl2br line-break solution

---

The solution is to set the property white-space on the element displaying the content of your textarea:

white-space: pre-line;

---

As of React 16 a component can return an array of elements, which means you can create a component like this:

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

which you'd use like this:

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

---

독립형 구성 요소에 대한 Pete의 이전 제안은 중요한 한 가지를 놓쳤지만 훌륭한 솔루션입니다. 목록에는 키 가 필요 합니다 . 나는 그것을 약간 조정했고 내 버전 (콘솔 경고 없음)은 다음과 같습니다.

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

React 16의 Fragments를 사용합니다.

---

사랑 Webit 버전. Fragment 구성 요소에 대해 몰랐기 때문에 매우 유용합니다. 그래도 reduce 방법을 사용할 필요가 없습니다. 지도면 충분합니다. 또한 list에는 react 키가 필요하지만 반복 메서드의 인덱스를 사용하는 것은 나쁜 습관입니다. eslint는 혼란스런 버그가 생길 때까지 경고를 계속해서 박살 냈습니다. 따라서 다음과 같이 보일 것입니다.

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

참고 URL : https://stackoverflow.com/questions/36260013/react-display-line-breaks-from-saved-textarea