Chuỗi kết xuất ReactJS với khoảng trắng không ngắt

Tôi có một số đạo cụ có một chuỗi có thể chứa các ký tự như &. Nó cũng chứa khoảng trắng. Tôi muốn thay thế tất cả các khoảng trắng bằng  .

Có cách nào dễ dàng để tôi có thể làm điều này không? Hãy nhớ rằng tôi không thể kết xuất bằng cú pháp này:

<div dangerouslySetInnerHTML={{__html: myValue}} />

bởi vì trước tiên tôi sẽ phải thay thế bất kỳ thực thể HTML nào bằng đánh dấu của chúng. Tôi không muốn phải làm điều này, có vẻ như mức độ quá thấp.

Có cách nào tôi có thể làm điều này?

Thay vì sử dụng  thực thể HTML, bạn có thể sử dụng ký tự Unicode  đề cập đến (U + 00A0 KHÔNG GIAN NGẮT):

<div>{myValue.replace(/ /g, "\u00a0")}</div>

Tôi biết đây là một câu hỏi cũ và điều này không thực hiện chính xác những gì bạn yêu cầu, nhưng thay vì chỉnh sửa chuỗi, những gì bạn muốn đạt được có thể được giải quyết tốt hơn bằng cách sử dụng white-space: nowrapthuộc tính CSS :

Trong html:

<div style="white-space: nowrap">This won't break lines</div>

Trong phản ứng:

<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>

Nếu bạn muốn hiển thị một xml đẹp:

var str = "<test>\n\t\t<value>1</value>\n</test>\n".replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\t/g, "\u00a0").replace(/\n/g, '<br/>');
return (
    <div dangerouslySetInnerHTML={{__html: str}} ></div>
)

Rất khó để gõ vào đây mà nó không biến mất, vì vậy tôi thêm một chút khoảng trắng để mọi người có thể nhìn thấy nó. Nếu bạn xóa khoảng trắng khỏi thẻ này <nbsp />, thì bạn sẽ có thể sử dụng khoảng trắng không ngắt trong React.

React chuyển thẻ JSX này thành một không gian liên tục. Kỳ quặc: Điều này cũng phải được sử dụng trên cùng một dòng với văn bản bạn muốn khoảng trắng. Ngoài ra, các khoảng trắng không ngắt với thẻ này không ngăn xếp trong React.

Để xóa khoảng trắng giữa chuỗi, mã dưới đây phù hợp với tôi. ví dụ: "afee dd" kết quả: "afeedd"

Vì vậy, bạn có một giá trị như "Xin chào thế giới" và chúng tôi sẽ nói rằng nó ở trong this.props.value.

Bạn có thể làm được việc này:

var parts = this.props.value.split(" "), array = [];
for (var i=0; i<parts.length; i++){
  // add the string
  array.push(<span key={i * 2}>{parts[i]}</span>);
  // add the nbsp
  array.push(<span key={i * 2 + 1}>&nbsp;</span>);
}

// remove the trailing nbsp
array.pop();

return <div>{array}</div>;

jsbin