在React组件中将HTML字符串呈现为真实HTML

小编典典

在React组件中将HTML字符串呈现为真实HTML

html

这是我尝试过的方法以及出现问题的方法。

这有效：

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

这不是：

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

description属性只是HTML内容的普通字符串。但是由于某种原因，它呈现为字符串，而不是HTML。

阅读 654

2020-05-10

小编典典

检查您尝试追加到节点的文本是否没有像这样转义：

var prop = {
    match: {
        description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
    }
};

代替这个：

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

2020-05-10

小编典典

确实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'));

但是，如果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标记，那么我看到的唯一问题是标记错误。

更新

如果您正在处理`HTMLEntitles`。您需要先解码它们，然后才能发送给他们，`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 (

);
}
}

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

2020-05-15

在React组件中将HTML字符串呈现为真实HTML

共2个答案