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

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

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

<textarea value={address} />

주소를 표시하려고 할 때, 그래서...{address}줄 바꿈은 표시되지 않고 모두 한 줄에 있습니다.

<p>{address}</p>

이 문제를 해결할 방법이 있나요?

JS를 사용할 이유가 없습니다.공백 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 행 구분으로 변환해야 합니다.

반응에서 사용하는 방법에 대한 기사:새 선을 끊기 위해 반응합니다(nl2br

기사를 인용하려면:

리액트의 모든 것이 기능이라는 것을 알고 있기 때문에 실제로는 할 수 없습니다.

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

그러면 내부에 DOM 노드가 있는 문자열이 반환되므로 이 또한 허용되지 않습니다. 왜냐하면 문자열만 사용해야 하기 때문입니다.

그런 다음 다음과 같은 작업을 수행할 수 있습니다.

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

리액트는 순수한 함수이고 두 개의 함수가 서로 옆에 있을 수 있기 때문에 이것도 허용되지 않습니다.

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의 fragment를 사용합니다.

위의 답변에 약간의 추가 사항:white-space재산은 와 함께 사용하는 것이 좋다.word-wrap넘치지 않도록 하기 위해서.

p {
  white-space: pre-wrap;
  word-wrap: break-word;   
}

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>

웹 사이트 버전 너무 좋아요.Fragment 컴포넌트에 대해서는 몰랐습니다만, 매우 편리합니다.그러나 축소 방법을 사용할 필요는 없습니다.지도면 충분해.또한 list는 respect에 키가 필요하지만 반복방식의 인덱스를 사용하는 것은 나쁜 습관입니다.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