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

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

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

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

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

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

 HTMLエンティティを使用する代わりに、 （U + 00A0ノーブレークスペース）を参照するUnicode文字を使用できます。

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

私はこれが古い質問であることを知っています、そしてこれはあなたが要求したことを正確に行いませんが、文字列を編集するよりも、あなたが達成したいことはおそらくCSSwhite-space: nowrap属性を使用してよりよく解決されます：

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"

つまり、この「Hello world」のような値があり、それはにあると言えます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