react 解析html字符串,在React组件中将HTML字符串呈现为真实HTML

小编典典

确实this.props.match.description是一个字符串或一个对象？如果是字符串，则应将其转换为HTML。例：

class App extends React.Component {

constructor() {

super();

this.state = {

description: '

something

'

}

}

render() {

return (

);

}

}

ReactDOM.render(, document.getElementById('root'));

但是，如果description:

something

没有引号，’‘您将得到：

​```

Object {

$$typeof: [object Symbol] {},

_owner: null,

key: null,

props: Object {

children: “something”,

style: “color:red;”

},

ref: null,

type: “h1”

}

如果它是字符串，并且您没有看到任何HTML标记，那么我看到的唯一问题是标记错误。

更新

如果您正在处理`HTMLEntitles`。您需要先解码它们，然后才能发送给他们，`dangerouslySetInnerHTML`这就是为什么他们危险地称呼它:)

工作示例：

class App extends React.Component {

constructor() {

super();

this.state = {

description: ‘

Our Opportunity:

‘

}

}

htmlDecode(input){

var e = document.createElement(‘div’);

e.innerHTML = input;

return e.childNodes.length === 0 ? “” : e.childNodes[0].nodeValue;

}

render() {

return (

);

}

}

ReactDOM.render(, document.getElementById(‘root’));

```

2020-05-15