插入HTML与反应variables语句（JSX）

我正在用React构build一些东西，我需要在JSX中插入带有Reactvariables的HTML。 有没有办法有这样的variables：

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; 

并插入到像这样的反应，并有它的工作？

 render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } 

并按预期插入HTML？ 我还没有看到或听到任何可以做到这一点的反应函数，或parsing的东西，可以使这个工作的方法。

Answer 1

你可以使用危险的SetInnerHTML ，例如

 render: function() { return ( <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div> ); } 

Answer 2

请注意，如果您不知道正在注入的HTMLstring是什么，那么使用dangerouslySetInnerHTML会非常危险。 这是因为恶意的客户端代码可以通过脚本标签注入。

如果您不能100％确定要呈现的HTML是XSS（跨站点脚本）安全，则可以通过DOMPurify等实用工具清理HTMLstring。

例：

 import DOMPurify from 'dompurify' var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; render: function() { return ( <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div> ); } 

Answer 3

危险的SetInnerHTML有很多缺点，因为它设置在标签内部。

我build议你使用一些反应包装，就像我在npm上find一个这样的包装。 html-react-parser完成相同的工作。

 import Parser from 'html-react-parser'; var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; render: function() { return ( <div className="content">{Parser(thisIsMyCopy)}</div> ); } 

很简单 ：）

Answer 4

如果其他人仍然在这里。 有了ES6，你可以像这样创build你的htmlvariables：

 render(){ var thisIsMyCopy = ( <p>copy copy copy <strong>strong copy</strong></p> ); return( <div> {thisIsMyCopy} </div> ) }