使用React变量语句(JSX)插入HTML

JavaScript

十三L

2020-03-10

我正在用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函数的信息,也没有听说过任何可以使之起作用的解析方法。

第528篇《使用React变量语句(JSX)插入HTML》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
梅Near米亚 2020.03.10

通过使用''它使它成为字符串。使用不带反逗号的它将正常工作。

米亚凯 2020.03.10

如果还有其他人落在这里。使用ES6,您可以像这样创建html变量:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}
Mandy小卤蛋凯 2020.03.10

您可以使用dragonallySetInnerHTML,例如

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android