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

Program / 글쓴이

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

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와 같은 것을 형식화하고 이해합니다.