插入带有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() {

    return (

        <div className="content">{Parser(thisIsMyCopy)}</div>

    );

}

很简单 ：）

Answer 2

您可以使用dragonallySetInnerHTML，例如

render: function() {

    return (

        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>

    );

}