以下是我尝试过的方法,以及出错的地方。
如此:
<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />
这不是:
<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />
description属性只是一个普通的HTML内容字符串。然而,由于某些原因,它被呈现为字符串,而不是HTML。
有什么建议吗?
以下是我尝试过的方法,以及出错的地方。
如此:
<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />
这不是:
<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />
description属性只是一个普通的HTML内容字符串。然而,由于某些原因,它被呈现为字符串,而不是HTML。
有什么建议吗?
当前回答
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> without the quotes ",你会得到:
Object {
$$typeof: [object Symbol] {},
_owner: null,
key: null,
props: Object {
children: "something",
style: "color:red;"
},
ref: null,
type: "h1"
}
如果它是一个字符串,你没有看到任何HTML标记,我看到的唯一问题是错误的标记..
更新
如果你正在处理HTML实体,你需要解码他们之前发送他们到dangerlysetinnerhtml,这就是为什么它被称为“dangerous”:)
工作的例子:
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'));
其他回答
检查你试图附加到节点的文本是否没有像这样转义:
var prop = {
match: {
description: '<h1>Hi there!</h1>'
}
};
而不是这样:
var prop = {
match: {
description: '<h1>Hi there!</h1>'
}
};
如果转义,您应该从服务器端转换它。
节点为文本,因为已转义
该节点是dom节点,因为没有转义
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> without the quotes ",你会得到:
Object {
$$typeof: [object Symbol] {},
_owner: null,
key: null,
props: Object {
children: "something",
style: "color:red;"
},
ref: null,
type: "h1"
}
如果它是一个字符串,你没有看到任何HTML标记,我看到的唯一问题是错误的标记..
更新
如果你正在处理HTML实体,你需要解码他们之前发送他们到dangerlysetinnerhtml,这就是为什么它被称为“dangerous”:)
工作的例子:
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'));
如果你在字符串中有HTML,我建议使用一个叫做HTML -react-parser的包。
安装
NPM:
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>
如果您可以控制{this.props.match.description},并且您正在使用JSX。我建议不要使用“dangerlysetinnerhtml”。
// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;
// Here is how you print
return (
{description}
);
如果你可以控制包含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>
}