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

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)

기사를 인용하려면 :

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

이제 우리는 각 줄 바꿈을 범위로 래핑하고 있으며 범위에 인라인 표시가 있기 때문에 잘 작동합니다. 이제 우리는 작동하는 nl2br 줄 바꿈 솔루션을 얻었습니다.

해결책은 white-space다음의 내용을 표시하는 요소에 속성을 설정하는 것입니다 textarea.

white-space: pre-line;

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

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

React 16의 Fragments를 사용합니다.

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

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