在React中插入HTML評論

有沒有方法在React JSX中插入HTML評論節點，就像插入組件或DOM節點一樣？在React中插入HTML評論

例如，像：

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

會使到：

<!-- comment text -->

的想法是，該意見在頁面上可見的，所以{ /* this /* }不回答我的問題。

注意以下相關問題沒有回答，問的東西有些不同：

How to render a HTML comment in React?

我只是想呈現一個註釋節點。我注意到React基礎架構自己渲染HTML註釋，所以也許有一種（稍微有些黑客？）的方式來做到這一點。

來源

2016-11-02 GregRos

我認爲這是不可能的時刻，由於不能夠唯一標識DOM註釋節點。最佳參考我可以找到：https://groups.google.com/forum/#!topic/reactjs/y7AGHSntR8I –

這個特定的答案回答你的問題https://stackoverflow.com/a/41131326/4373305 –

@АлексейЗинкевич謝謝！這個解決方案是否有你知道的任何奇怪的副作用？ – GregRos

我唯一能想到的就是操縱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> 
     ) 
     } 
    })

來源

2016-11-02 14:41:02 StackOverMySoul

另一種方法是使用dangerouslySetInnerHTML

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

dangerouslySetInnerHTML是陣營的替補在瀏覽器的DOM使用的innerHTML。一般來說，從代碼中設置HTML是有風險的，因爲很容易讓您的用戶無意中發現跨站腳本攻擊（XSS）。因此，您可以直接從React中設置HTML，但必須輸入危險的SetInnerHTML並使用__html鍵傳遞對象，以提醒自己危險。

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

來源

2017-01-06 01:22:53 ptim