ReactJS แสดงสตริงที่มีช่องว่างที่ไม่ทำลาย

ฉันมีอุปกรณ์ประกอบฉากบางอย่างที่มีสตริงที่อาจมีอักขระเช่น & นอกจากนี้ยังมีช่องว่าง  ฉันต้องการที่จะแทนที่ช่องว่างทั้งหมดที่มี

มีวิธีง่ายๆที่ฉันสามารถทำได้หรือไม่? โปรดทราบว่าฉันไม่สามารถแสดงผลโดยใช้ไวยากรณ์นี้ได้:

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

เพราะก่อนอื่นฉันจะต้องแทนที่เอนทิตี HTML ใด ๆ ด้วยมาร์กอัป ฉันไม่ต้องการที่จะทำเช่นนี้ดูเหมือนว่าระดับต่ำเกินไป

มีวิธีที่ฉันสามารถทำได้หรือไม่?

แทนที่จะใช้ เอนทิตี HTML คุณสามารถใช้อักขระ Unicode ซึ่ง อ้างถึง (U + 00A0 NON-BREAKING SPACE):

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

ฉันรู้ว่านี่เป็นคำถามเก่าและสิ่งนี้ไม่ได้ทำตามที่คุณขอ แต่แทนที่จะแก้ไขสตริงสิ่งที่คุณต้องการบรรลุอาจได้รับการแก้ไขให้ดีขึ้นโดยใช้white-space: nowrapแอตทริบิวต์CSS :

ใน html:

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

ในการตอบสนอง:

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

หากคุณต้องการแสดง xml สวย ๆ :

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

มันยากมากที่จะพิมพ์ตรงนี้โดยที่มันไม่หายไปดังนั้นฉันจึงเพิ่มช่องว่างเล็กน้อยเพื่อให้ทุกคนเห็น หากคุณลบช่องว่างออกจากแท็ก <nbsp /> นี้คุณจะสามารถใช้ช่องว่างที่ไม่ทำลายใน React

React แปลแท็ก JSX นี้เป็นช่องว่างที่ไม่ทำลาย นิสัยแปลก ๆ : สิ่งนี้ต้องใช้ในบรรทัดเดียวกับข้อความที่คุณต้องการเว้นวรรค นอกจากนี้ช่องว่างที่ไม่ทำลายด้วยแท็กนี้จะไม่ซ้อนกันใน React

ในการลบช่องว่างระหว่างสตริงโค้ดด้านล่างใช้ได้กับฉัน เช่น: "afee dd" ผลลัพธ์: "afeedd"

เพื่อให้คุณมีค่าเช่นนี้ "สวัสดีชาวโลก" this.props.valueและเราจะบอกว่ามันเป็นใน

คุณสามารถทำได้:

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