web-dev-qa-db-ja.com

ReactJSは、改行なしのスペースで文字列をレンダリングします

＆などの文字を含むことができる文字列を持つ小道具がいくつかあります。スペースも含まれます。すべてのスペースを に置き換えたい。

これを簡単に行う方法はありますか？この構文を使用してレンダリングすることはできないことに注意してください。

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

hTMLエンティティをマークアップに置き換える必要があるためです。これをする必要はありません。レベルが低すぎるようです。

これを行う方法はありますか？

htmlreactjs
76
Jack Allan

&nbsp; HTMLエンティティを使用する代わりに、Unicodeの改行なしスペース文字を使用できます。

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

これは古い質問であり、これはあなたが求めていたものと正確には一致しませんが、文字列を編集するのではなく、CSS white-space: nowrap属性：

HTMLで：

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

反応中：

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

消えずにここに入力するのは非常に難しいので、誰もが見えるように小さな空白を追加します。このタグ<nbsp />から空白を削除すると、Reactで改行しないスペースを使用できるようになります。

Reactは、このJSXタグを改行なしスペースに変換します。奇妙な癖：これは、スペースを取りたいテキストと同じ行でも使用する必要があります。また、このタグを含む改行しないスペースは、Reactでスタックしません。

0
Ryan Berdel

きれいな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>
)
0
Tommy

文字列間のスペースを削除するには、以下のコードが役立ちます。例： "afee dd"結果： "afeedd"

0
Raj