我正在用React构建一些东西,我需要在JSX中插入带有React变量的HTML。有没有一种方法可以让一个变量像这样:

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

然后像这样把它插入react,让它工作?

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

并让它按预期插入HTML ?我还没有见过或听说过任何一个react函数可以内联做这件事,或者一个解析东西的方法可以让它工作。


当前回答

试试Fragment,如果你不想要以上任何一种。

在你的情况下,我们可以写信

import React, {useState, Fragment} from 'react'

const thisIsMyCopy = Fragment('<p>copy copy copy <strong>strong copy</strong></p>')

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

如果你使用hook想要在某个条件下设置它的状态

const [thisIsMyCopy, setThisIsMyCopy] = useState(<Fragment><p>copy copy copy <strong>strong copy</strong></p></Fragment>);

其他回答

请注意,如果您不知道正在注入的HTML字符串中有什么内容,那么dangerlysetinnerhtml可能是危险的。这是因为恶意客户端代码可以通过脚本标记注入。

如果您不能100%确定所呈现的HTML是XSS(跨站点脚本)安全的,那么通过诸如DOMPurify之类的实用程序来清除HTML字符串可能是一个好主意。

例子:

import DOMPurify from 'dompurify'

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


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

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

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

试试Fragment,如果你不想要以上任何一种。

在你的情况下,我们可以写信

import React, {useState, Fragment} from 'react'

const thisIsMyCopy = Fragment('<p>copy copy copy <strong>strong copy</strong></p>')

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

如果你使用hook想要在某个条件下设置它的状态

const [thisIsMyCopy, setThisIsMyCopy] = useState(<Fragment><p>copy copy copy <strong>strong copy</strong></p></Fragment>);

dangerlysetinnerhtml有很多缺点,因为它设置在标签内部。

我建议你使用一些react包装器,比如我在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>
    );
}

非常简单:)

更新

在最新版本中,用法解释如下:

// ES Modules
import parse from 'html-react-parser';

// CommonJS
const parse = require('html-react-parser');
....

//Parse single element
parse('<li>Item 1</li><li>Item 2</li>');

//Parse multiple elements
parse('<li>Item 1</li><li>Item 2</li>');

你可以使用dangerouslySetInnerHTML,例如:

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