ReactJ는 공백이 없는 문자열을 렌더링합니다.

ReactJ는 공백이 없는 문자열을 렌더링합니다.

& 등의 문자를 넣을 수 있는 스트링이 있는 소품이 있습니다.공백도 포함되어 있습니다.모든 공간을 다음으로 바꾸고 싶다. .

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

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

HTML 엔티티를 마크업으로 대체해야 하기 때문입니다.너무 낮은 수준인 것 같아, 난 이걸 하고 싶지 않아요.

제가 할 수 있는 방법이 있을까요?

를 사용하는 대신 HTML 엔티티, Unicode 문자를 사용할 수 있습니다. (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>

제 생각에, 가장 좋은 방법은 코드에 명시적으로 인쇄하는 것입니다.(리액션이 이러한 단순하고 기본적인 기능을 즉시 지원하지 않는 것은 유감입니다.)react의 jsx가 오류를 발생시킨 경우, 이는 nbsp가 코드에 잘못 입력되었음을 의미합니다.

간단한 규칙은 모든 특수문자는 태그로 둘러싸야 한다는 것입니다.

대부분의 경우 그대로 둘 수 있습니다.

return <span>{n}&nbsp;followers</span>;

그러나 이와 같은 내용을 추가할 경우:

// this will cause an error
{number > 0 && (<strong>{number}</strong>&nbsp;)}

부모태그(예를 들어 빈)를 사용하여 부품을 nbsp로 랩해야 합니다.

{number > 0 && (
  <>
    <strong>{number}</strong>
    &nbsp;
  </>
)}

이 기능은 특수문자가 필요한 경우(예를 들어 숫자가 0보다 큰 경우)에만 유용할 수 있습니다.

예쁜 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" 결과: "afedd"

{myValue.replace(/\s+/g, '')}

'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

언급URL : https://stackoverflow.com/questions/24432576/reactjs-render-string-with-non-breaking-spaces