Cách hiển thị một chuỗi văn bản nhiều dòng trong React

Giả sử tôi có một chuỗi văn bản chứa các dấu ngắt dòng và tôi hiển thị nó như sau:

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

Trong HTML, dấu ngắt dòng không hiển thị như dấu ngắt dòng. Tôi nên làm điều này như thế nào trong React? Tôi không muốn chuyển đổi sang <br>thẻ và sử dụng dangerouslySetInnerHTML. Có cách nào khác không?

Bạn có thể thử đặt div cho mỗi dòng

render() {
    return (<div>
        <div>{"One"}</div>
        <div>{"Two"}</div>
        <div>{"Three"}</div>
    </div>);
}

Hoặc là

render() {
    var text = "One\nTwo\nThree";
    return (
    <div>
        {text.split("\n").map((i,key) => {
            return <div key={key}>{i}</div>;
        })}
    </div>);
}

Tạo một lớp CSS mới

.display-linebreak {
  white-space: pre-line;
}

Hiển thị văn bản của bạn với lớp CSS đó

render() {
  const text = 'One \n Two \n Three';
  return ( 
     <div className="display-linebreak"> 
        {text} 
     </div>
  );
}

Kết xuất bằng dấu ngắt dòng (Chuỗi khoảng trắng sẽ thu gọn thành một khoảng trắng duy nhất. Văn bản sẽ bao bọc khi cần thiết). Như thế này:

One
Two
Three

Bạn cũng có thể xem xét gói trước. Thông tin thêm tại đây ( Thuộc tính khoảng trắng CSS ).

Bạn có thể sử dụng thuộc tính CSS "white-space: pre". Tôi nghĩ đây là cách dễ nhất để xử lý việc này.

Đây là giải pháp sạch nhất (afaik):

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

Thay vào đó, bạn cũng có thể sử dụng <div style={{whiteSpace:"pre"}}>hoặc bất kỳ phần tử khối html nào khác (như spanhoặc pvới thuộc tính style này)

Hiển thị văn bản được phân tách của bạn "Dòng thứ nhất \ n Dòng thứ hai của tôi \ nWhatevs ..." bên trong một vùng văn bản html bình thường. Tôi biết nó hoạt động vì tôi vừa mới sử dụng nó hôm nay! Chỉ đọc vùng văn bản nếu bạn phải, và tạo kiểu cho phù hợp.

Bạn có thể sử dụng -webkit-user-modify: read-write-plaintext-only;trong div của mình. Nó sẽ định dạng và hiểu những thứ như \ n và \ p chẳng hạn.

Bạn có thể sử dụng thẻ textarea của html, sau này bạn có thể thêm kiểu cho thẻ textarea. Nó giải quyết khá nhiều vấn đề của bạn bao gồm ngắt dòng và khoảng cách tab. Cheerzz ...

ví dụ: Kết xuất của bạn sẽ giống như bên dưới

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

Đầu ra:

One
Two
Three

Hãy thử cái này,

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

Bạn có thể chạy một cách an toàn String.rawthay thế cho loại giá trị này.

const text = String.raw`One
Two
Three
`

render() {
  return <div style={{ whiteSpace: "pre" }}>{text}</div>
}

Bạn cũng có thể chỉ sử dụng một <pre>thẻ thực hiện hiệu quả điều tương tự, nhưng nó kém rõ ràng hơn về mặt ngữ nghĩa nếu bạn đã sử dụng thẻ đó cho các mục đích khác trong ứng dụng của mình.

<div style={{ whiteSpace: "break-spaces" }}> {JSON.stringify(state, null, " ")} </div>