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

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

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

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

HTML에서는 줄 바꿈은 줄 바꿈으로 렌더링되지 않습니다.리액트에서는 어떻게 해야 돼요?변환하고 싶지 않다<br>태그 및 사용dangerouslySetInnerHTML.다른 방법이 없나요?

새로운 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 공백 속성).

각 행마다 디브(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 속성 "white-space: pre" 를 사용할 수 있습니다.이게 가장 쉬운 방법인 것 같아요.

이거 드셔보세요.

render() {
    var text = "One\nTwo\nThree";
    return <div style={{whiteSpace: 'pre-line'}}>{text}</div>;
}

가장 깨끗한 솔루션(afik):

   render(){
      return <pre>
             Line 1{"\n"}
             Line 2{"\n"}
             Line 3{"\n"}
      </pre>
   }

대신,<div style={{whiteSpace:"pre"}}>또는 기타 html 블록 요소(예:span또는p이 스타일 속성 포함)

사용할 수 있습니다.-webkit-user-modify: read-write-plaintext-only;당신의 div에.예를 들어 \n 및 \p 등의 형식을 지정하고 이를 이해합니다.

html의 텍스트 영역 태그를 사용할 수 있으며 나중에 텍스트 영역 태그에 스타일을 추가할 수 있습니다.줄 바꿈이나 탭 공간 등 모든 문제를 거의 해결합니다.치어리더...

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

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>

패키지 이름 전용을 사용하여 여러 줄의 텍스트를 렌더링할 수 있습니다.

const multilineText = `
  This is line 1
  This is line 2
  This is line 3
`;

export default function App() {
  return (
    <>
      <div style={{ whiteSpace: "pre-wrap" }}>{dedent(multilineText)}</div>
    </>
  );
}

델은,<br/>TypeScript 프로젝트에서 다음과 같은 간단한 함수 컴포넌트를 사용하고 있습니다.

import React, { FunctionComponent } from "react"

export const Multiline: FunctionComponent<{ text: string }> = ({ text }) => (
  <>
    {text.split(/\n|\r\n/).map((segment, index) => (
      <>
        {index > 0 && <br />}
        {segment}
      </>
    ))}
  </>
)

구분 텍스트 "My line one\nMy second line\nWhatevs"를 렌더링합니다."를 클릭합니다.오늘 막 사용했기 때문에 작동한다는 것을 알고 있습니다! 텍스트 영역을 필요한 경우에만 읽기 전용으로 만들고 그에 맞게 스타일링하십시오.

이 예에서는 react.displays 컴포넌트,

( map , split )를 사용하여 각 행을 새로운 div 요소에 삽입합니다.이것은 ltr/rtl 스타일의 컴포넌트를 동시에 지원하는 코멘트나 코멘트의 좋은 예입니다.다음은 간단한 예입니다.

<div> 
    { ' this is first line \n this is second line \n this is third line '.split('\n').map( line => 
    <div  key={ Math.random() * 10} dir="auto"  style={{ textAlign: 'start'}}> {line}  </div> 
    )} 
</div>

또한 문자열 데이터가 API/react 상태에서 변환되는 경우 문자열 변수 이름을 다음과 같이 사용할 수 있습니다.

<div> 
    { post_comments.split('\n').map( line => 
    <div  key={ Math.random() * 10}  dir="auto"  style={{textAlign: 'start'}}> {line} </div> 
    )} 
</div>

이것은 단순한 예이며, 케이스/요건에 따라 변경해 주세요.

그리고 당신이 원한다면 당신의 요청에 따라 div 태그를 p 태그로 대체할 수 있습니다.

나는 이것이 너에게 도움이 되길 바란다.

언급URL : https://stackoverflow.com/questions/35351706/how-to-render-a-multi-line-text-string-in-react