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

362725 次浏览
小开
最佳答案

你可以使用dangerouslySetInnerHTML，例如:

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

这是因为恶意客户端代码可以通过脚本标记注入。

如果你不能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>
);
}
小开

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

我建议你使用一些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>');
小开

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

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

你也可以像这样在ReactDOM中包含这个HTML:

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


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

下面是React文档中的两个链接链接和link2，可能会有帮助。

小开

通过使用''，你将它变成一个字符串。使用时没有倒逗号，它将工作良好。

const App = () => {
const span = <span> whatever your string </span>


const dynamicString = "Hehe";
const dynamicStringSpan = <span> {`${dynamicString}`} </span>


return (
<div>


{span}


{dynamicStringSpan}


</div>
);


};


ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

小开

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

  render() {
const props = {
dangerouslySetInnerHTML: { __html: '<br/>' },
};
return (
<div {...props}></div>
);
}
小开 
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元素-

  1. 删除''，它将工作
  2. 使用<Fragment>返回一个HTML元素。
小开

尝试片段，如果你不想要以上任何一个。

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

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>);
小开

你不需要任何特殊的图书馆或“危险”;属性。你可以使用React Refs来操作DOM:

class MyComponent extends React.Component {
    

constructor(props) {
        

super(props);
this.divRef = React.createRef();
this.myHTML = "<p>Hello World!</p>"
}
    

componentDidMount() {
        

this.divRef.current.innerHTML = this.myHTML;
}
    

render() {
        

return (
            

<div ref={this.divRef}></div>
);
}
}

一个工作样本可以在这里找到:

< a href = " https://codepen。io / bemipefe /钢笔/ mdEjaMK noreferrer“rel = > https://codepen.io/bemipefe/pen/mdEjaMK < / >


提交答案