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

我正在用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函数可以内联做这件事，或者一个解析东西的方法可以让它工作。

当前回答

请注意，如果您不知道正在注入的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>
    );
}

2017-02-22 01:17:55

其他回答

你可以使用dangerouslySetInnerHTML，例如:

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

2014-05-14 19:33:22

请注意，如果您不知道正在注入的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>
    );
}

2017-02-22 01:17:55

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

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

2017-10-27 13:30:15

为了避免linter错误，我这样使用它:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

2018-05-22 12:19:08

import { Fragment } from 'react' // react version > 16.0

var thisIsMyCopy = (
  <Fragment>
    <p>copy copy copy&nbsp;
    <strong>strong copy</strong>
    </p>
  </Fragment>
)

通过使用“the”将值设置为字符串，React无法知道它是HTML元素。您可以执行以下操作让React知道它是一个HTML元素-

去掉“，它就会工作使用<Fragment>返回一个HTML元素。

2018-11-13 12:42:29

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

推荐文章

最新文章

标签