구분되지 않는 공백이있는 ReactJS 렌더링 문자열

&와 같은 문자를 포함 할 수있는 문자열이있는 소품이 있습니다. 공백도 포함됩니다. 모든 공백을  .

쉽게 할 수있는 방법이 있습니까? 이 구문을 사용하여 렌더링 할 수는 없습니다.

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

먼저 HTML 엔티티를 마크 업으로 바꿔야하기 때문입니다. 나는 이것을하고 싶지 않다. 너무 낮은 수준 인 것 같다.

내가 할 수있는 방법이 있습니까?

 HTML 엔티티 를 사용하는 대신  (U + 00A0 NON-BREAKING SPACE) 를 참조 하는 유니 코드 문자를 사용할 수 있습니다 .

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

나는 이것이 오래된 질문이라는 것을 알고 있으며 이것은 당신이 요청한 것을 정확히 수행하지는 않지만 문자열을 편집하는 대신 CSS white-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