插入带有React变量语句(JSX)的HTML


203

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

Answers:


294

您可以使用dragonallySetInnerHTML,例如

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

2
如果您需要添加一些东西,该如何工作<head>
丹妮尔·马德利

componentDidMount中的普通DOM方法应该可以工作,但是我之前没有做过。
道格拉斯

@DanielleMadeley您是否要在<head>中插入条件IE注释?如果是这样,我已经成功使用了这里描述的技巧:nemisj.com/conditional-ie-comments-in-react-js
Cam Jackson

3
确保您将方法传递给dragonallySetInnerHTML而不是哈希。根据文档,仅传递哈希是危险的。参考:facebook.github.io/react/tips/dangerously-set-inner-html.html
评论者z

1
有没有不插入div的方法吗?
花花公子

101

请注意,dangerouslySetInnerHTML如果您不知道要注入的HTML字符串中的内容,则可能很危险。这是因为可以通过脚本标签注入恶意的客户端代码。

如果您不是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>
    );
}

@vsync nope它不应该:)
Artem Bernatskyi

1
是否不仅可以渲染html标签,还可以渲染库中的标签,例如材料ui Alert标签。我希望代码像这样import DOMPurify from 'dompurify' const thisIsMyCopy = '<Alert severity="warning">copy copy copy <strong>strong copy</strong></Alert >'; render: function() { return ( <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div> ); }
sasha romanov

@sasharomanov,您对此方案有解决方案吗?
Nimish Goel

51

危险地,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>
    );
}

很简单 :)


3
“ dangerouslySetInnerHTML有很多缺点,因为它设置在标记内。” 您能否进一步解释一下。试图弄清楚html-react-parser和消毒过的innerHtml之间有什么根本区别
dchhetri

看来,HTML反应的解析器不净化输入-参见常见问题
有点脑子的

28

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


14
起初我笑了,然后给了我一个让我震惊的机会
M在

1
到目前为止,最简单的答案尤其是如果HTML由您编写并且根据用户输入是动态的。您可以从字面上设置var myHtml = <p>某些文本</ p>; 它有效
pat8719 '19

1
这是最好的答案。谢了哥们!
安迪·默瑟

3

为了避免棉绒错误,我可以这样使用它:

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

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

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

通过使用''将值设置为字符串,React无法知道它是HTML元素。您可以执行以下操作以使React知道它是HTML元素-

  1. 删除'',它将起作用
  2. 使用<Fragment>返回一个HTML元素。

2
这不能回答问题。内容thisIsMyCopy本身就是JSX,而不是HTML字符串。因此,您实际上是将JSX粘贴到JSX中。
Antares42 '19

您也可以在Preact中找到Fragments,但只能在X版及更高版本中找到。
Nasia Makrygianni19年

-3

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

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

2
如果您想在字符串中包含变量,则需要{}像这样将每个字符串和整个字符串包装起来,以这样的标记(<span>{telephoneNumber} <br /> {email}</span>)
DanV

2
这与问题中的要求不同。问题<p>copy copy copy <strong>strong copy</strong></p>是一个字符串。您将其作为JSX。
YPCrumble

4
那不是ES6,而是JSX
gztomas

-3

您还可以像这样在ReactDOM中包含以下HTML:

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

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

这是React文档中的两个链接linklink2,可能会有所帮助。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.