React에서 여러 줄 텍스트 문자열을 렌더링하는 방법

줄 바꿈이 포함 된 텍스트 문자열이 있고 다음과 같이 렌더링한다고 가정합니다.

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

HTML에서 줄 바꿈은 줄 바꿈으로 렌더링되지 않습니다. React에서 어떻게해야합니까? <br>태그 로 변환하고 dangerouslySetInnerHTML. 다른 방법이 있습니까?

각 줄에 div를 넣어 볼 수 있습니다.

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

구분 된 텍스트 "My line one \ nMy second line \ nWhatevs ..."를 일반 html 텍스트 영역 안에 렌더링합니다. 나는 오늘 그것을 사용했기 때문에 그것이 작동한다는 것을 안다! 필요한 경우 텍스트 영역을 읽기 전용으로 만들고 그에 따라 스타일을 지정하십시오.

-webkit-user-modify: read-write-plaintext-only;div에서 사용할 수 있습니다 . 예를 들어 \ n 및 \ p와 같은 것을 형식화하고 이해합니다.

html의 textarea 태그를 사용할 수 있으며 나중에 textarea 태그에 스타일을 추가 할 수 있습니다. 줄 바꿈 및 탭 공백을 포함한 모든 문제를 거의 해결합니다. 치어 즈 ...

예 : 렌더링은 다음과 같습니다.

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>