这是我尝试过的方法以及它是如何出错的。
这有效：
<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />
这不会：
<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />
description 属性只是一个普通的 HTML 内容字符串。但是，由于某种原因，它呈现为字符串，而不是 HTML。
有什么建议？
在 React 组件中将 HTML 字符串渲染为真正的 HTML
IT技术
javascript
html
reactjs
jsx
2021-02-07 20:09:25
6个回答
是this.props.match.description字符串还是对象？如果它是一个字符串，它应该被转换为 HTML 就好了。例子：
class App extends React.Component {
constructor() {
super();
this.state = {
description: '<h1 style="color:red;">something</h1>'
}
}
render() {
return (
<div dangerouslySetInnerHTML={{ __html: this.state.description }} />
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
结果：http : //codepen.io/ilanus/pen/QKgoLA?editors=1011
但是，如果 description<h1 style="color:red;">something</h1>没有引号''，您将得到：
Object {
$$typeof: [object Symbol] {},
_owner: null,
key: null,
props: Object {
children: "something",
style: "color:red;"
},
ref: null,
type: "h1"
}
如果它是一个字符串并且您没有看到任何 HTML 标记，那么我看到的唯一问题就是错误标记。
更新
如果您正在处理 HTML 实体，则需要在将它们发送到之前对其进行解码，dangerouslySetInnerHTML这就是它被称为“危险”的原因:)
工作示例：
class App extends React.Component {
constructor() {
super();
this.state = {
description: '<p><strong>Our Opportunity:</strong></p>'
}
}
htmlDecode(input){
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
render() {
return (
<div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
我使用'react-html-parser'
yarn add react-html-parser
import ReactHtmlParser from 'react-html-parser';
<div> { ReactHtmlParser (html_string) } </div>
提升@okram 的评论以获得更多可见性：
来自其 github 描述：将 HTML 字符串直接转换为 React 组件，无需使用来自 npmjs.com 的危险的SetInnerHTML 将 HTML 字符串转换为 React 组件的实用程序。避免使用危险的 SetInnerHTML 并将标准 HTML 元素、属性和内联样式转换为它们的 React 等效项。
检查您尝试附加到节点的文本是否没有像这样转义：
var prop = {
match: {
description: '<h1>Hi there!</h1>'
}
};
取而代之的是：
var prop = {
match: {
description: '<h1>Hi there!</h1>'
}
};
如果被转义，你应该从你的服务器端转换它。
该节点是文本，因为已转义
该节点是一个 dom 节点，因为它没有被转义
如果您可以控制包含 html 的字符串的来源（即在您的应用程序中的某个地方），您可以从新<Fragment>API 中受益，执行以下操作：
import React, {Fragment} from 'react'
const stringsSomeWithHtml = {
testOne: (
<Fragment>
Some text <strong>wrapped with strong</strong>
</Fragment>
),
testTwo: `This is just a plain string, but it'll print fine too`,
}
...
render() {
return <div>{stringsSomeWithHtml[prop.key]}</div>
}
如果字符串中有 HTML，我建议使用名为html-react-parser.
安装它：npm install html-react-parser或者如果你使用纱线，yarn add html-react-parser
像这样使用它
import parse from 'html-react-parser'
const yourHtmlString = '<h1>Hello</h1>'
<div>
{parse(yourHtmlString)}
</div>