React 변수가있는 HTML 요소가 ASCII를 표시하지 않습니다.

Question

사용자 정의 제목을 수신하여 JS 변수에 설정했습니다. 그러나 출력에는 기호 대신 ASCII 코드가 표시됩니다. 다음은 렌더링 기능의 간단한 예입니다 :

render() { 
    var title = "My Title™" 
    return <div>{title}</div>; 
} 

는 그리고 출력은

내 제목 ™

보다는

내 제목입니다 ™

왜 이런 일이 발생합니까?

Answer 1

태그가 아니더라도 문자열에서 html을 삽입하려고합니다.

이렇게 쉽게 해결할 수있는 두 가지 해결책이 있습니다.

먼저 태그에서이 요소를 포장하고 나중에 삽입 할 수 있습니다 : 잘, 그것은 위험 때문에

var title = ["My Title", <span>&#8482</span>] 

둘째, 당신이하지 않는 것이 좋습니다에도 불구하고 dangerouslySetInnerHtml를 사용할 수 있습니다.

return <div dangerouslySetInnerHTML={{__html: title}}></div> 

완벽하기 때문에 @Tom Fenech는 답변에서 두 가지 다른 우아한 해결책을 제시했습니다.

전체 작업 코드 :

var Example = React.createClass({ 
 
    render: function() { 
 
    var listTitle = ["My Title", <span>&#8482;</span>] 
 
    var dangerousTitle = "My other Title&#8482;"; 
 
    return <div> 
 
     {listTitle}<br/> 
 
     <div dangerouslySetInnerHTML={{__html: dangerousTitle}}></div> 
 
    </div>; 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Example/>, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"></div>

Answer 2

그런 다음, 문자열에 ™ 기호를 포함 하나를 사용하는 문자 자체를 직접하거나 \u2122를 사용하여 참조 할 경우 (유니 코드 코드 포인트).

파일이 저장되고 올바른 인코딩으로 제공되는 한, 두 방법 모두에 문제가 없어야합니다.

function testComponent() { 
 
    return React.DOM.div(null, 
 
     React.DOM.h3(null, "My Title™"), 
 
     React.DOM.h3(null, "My Title\u2122")); 
 
} 
 

 
ReactDOM.render(React.createElement(testComponent), 
 
    document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>