插入带有React变量语句（JSX）的HTML

Question

我正在用React构建一些东西，我需要在JSX中插入带有React变量的HTML。有没有办法像这样一个变量：

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

并像这样将其插入反应中并起作用？

render: function() {

    return (

        <div className="content">{thisIsMyCopy}</div>

    );

}

并按预期插入HTML吗？我还没有看到或听到任何有关可以完成此内联的react函数的信息，也没有听说过任何使之能够工作的解析方法。

Answer 1

危险地，SetInnerHTML有很多缺点，因为它在标记内设置。我建议您使用一些反应包装，例如我为此在npm上找到的包装。 html-react-parser执行相同的工作。import Parser from 'html-react-parser';var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';render: function() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="content">{Parser(thisIsMyCopy)}</div>&nbsp; &nbsp; );}很简单 ：）

Answer 2

您可以使用dragonallySetInnerHTML，例如render: function() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>&nbsp; &nbsp; );}