Phản ứng ngắt dòng hiển thị từ vùng văn bản đã lưu

Sử dụng Facebook React. Trong trang cài đặt, tôi có một đa dòng textareanơi người dùng có thể nhập văn bản nhiều dòng (trong trường hợp của tôi là địa chỉ).

<textarea value={address} />

Khi tôi cố gắng hiển thị địa chỉ, một cái gì đó giống như {address}, nó không hiển thị ngắt dòng và tất cả nằm trên một dòng.

<p>{address}</p>

Bất kỳ ý tưởng làm thế nào để giải quyết điều này?

Không có lý do gì để sử dụng JS. Bạn có thể dễ dàng cho trình duyệt biết cách xử lý dòng mới bằng thuộc tính white-spaceCSS:

white-space: pre-line;

dòng trước

Các chuỗi khoảng trắng được thu gọn. Các dòng bị ngắt ở các ký tự dòng mới, tại <br>và khi cần để điền vào các hộp dòng.

Kiểm tra bản trình diễn này:

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

Điều này được mong đợi, bạn sẽ cần chuyển đổi các ký tự dòng (\ n) mới thành ngắt dòng HTML

Một bài viết về cách sử dụng nó trong react: React Newline to break (nl2br)

Trích dẫn bài báo:

Bởi vì bạn biết rằng mọi thứ trong React đều là các hàm, bạn không thể thực sự làm điều này

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

Vì điều đó sẽ trả về một chuỗi với các nút DOM bên trong, điều đó cũng không được phép, vì nó phải chỉ là một chuỗi.

Sau đó, bạn có thể thử làm điều gì đó như sau:

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

Điều đó cũng không được phép vì một lần nữa React là các hàm thuần túy và hai hàm có thể nằm cạnh nhau.

tldr. Giải pháp

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

Bây giờ chúng ta đang gói từng ngắt dòng trong một khoảng và điều đó hoạt động tốt vì span có hiển thị nội dòng. Bây giờ chúng tôi có một giải pháp ngắt dòng nl2br hoạt động

Giải pháp là đặt thuộc tính white-spacetrên phần tử hiển thị nội dung của textarea:

white-space: pre-line;

Đề xuất trước đây của Pete với thành phần độc lập là giải pháp tuyệt vời mặc dù nó bỏ sót một điều quan trọng. Danh sách cần có khóa . Tôi đã điều chỉnh nó một chút và phiên bản của tôi (không có cảnh báo trên bảng điều khiển) trông như thế này:

const NewLineToBr = ({ children = '' }) => children.split('\n')
  .reduce((arr, line, index) => arr.concat(
    <Fragment key={index}>
      {line}
      <br />
    </Fragment>,
  ), [])

Nó sử dụng các mảnh vỡ của React 16

Kể từ React 16, một thành phần có thể trả về một mảng các phần tử, có nghĩa là bạn có thể tạo một thành phần như sau:

export default function NewLineToBr({children = ""}){
  return children.split('\n').reduce(function (arr,line) {
    return arr.concat(
      line,
      <br />
    );
  },[]);
}

mà bạn sẽ sử dụng như thế này:

<p>
  <NewLineToBr>{address}</NewLineToBr>
</p>

Phiên bản webit tình yêu. Tôi không biết về thành phần Fragment, nó rất hữu ích. Tuy nhiên, không cần sử dụng phương pháp giảm. Bản đồ là đủ. Ngoài ra, danh sách cần các khóa trong phản ứng, nhưng thói quen xấu là sử dụng chỉ mục từ phương pháp lặp cho nó. eslint tiếp tục phá vỡ điều này trong cảnh báo của tôi cho đến khi tôi gặp lỗi nhầm lẫn. Vì vậy, nó sẽ trông như thế này:

const NewLine = ({ children }) =>
   children.split("\n").map(line => (
    <Fragment key={uuidv4()}>
      {line}
      <br />
    </Fragment>
  ));