REact에 HTML 주석 삽입

Question

React JSX에 HTML 주석 노드를 삽입하는 방법은 컴포넌트 또는 DOM 노드를 삽입하는 것과 같은 방법일까요?

예를 들어, 같은 : 그래서 { /* this /* }는 내 질문에 대답하지 않는, 아이디어는 댓글이 페이지에서 볼 수 있다는 것입니다

<!-- comment text --> 

:

React.createElement(Comment, {}, "comment text"); 

는에 렌더링겠습니까. 다음 관련 질문에 대한 답변이 다소 다른 무언가를 요구하지 않습니다

참고 :

How to render a HTML comment in React?

난 그냥 하나의 주석 노드를 렌더링합니다. 나는 React 인프라가 HTML 주석을 독자적으로 표현한다는 것을 알아 차리고, 아마도 HTML 해설을 할 수있는 방법이 있을지도 모른다.

Answer 1

내가 생각할 수있는 것은 componentDidMount에서 DOM을 조작하고 주석을 추가하는 것일뿐입니다. 그렇다면 React가 DOM 조작을 처리하지 않아서 일부 문제가 발생할 수 있습니다.

var HTMLComment = React.createClass({ 

     componentDidMount: function(){ 
     var htmlComment = "<!--" + this.props.comment + "-->"; 
      this.span.innerHTML = htmlComment; 
     }, 

     render: function(){ 
     return (
      <span ref={(span) => this.span = span} ></span> 
     ) 
     } 
    }) 

Answer 2

또 다른 대안은 dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{ __html: '<!-- comment text -->' }} /> 

dangerouslySetInnerHTML 브라우저 DOM의 innerHTML을 사용에 대한의 대체 반응이다 사용하는 것입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사용자를 실수로 XSS (Cross-Site Scripting) 공격에 노출시키기 쉽기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수 있지만 dangerouslySetInnerHTML을 입력하고 __html 키를 사용하여 객체를 전달해야 위험하다는 것을 상기 할 수 있습니다.

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml