我有这个 React 组件,其主要目标是在通过 marked
将存储的广告 MarkDown 文章(.md 文件)转换为 HTML 后呈现该文章。
Articles.js
import React from 'react';
import marked from 'marked';
import './articles.css';
export default class Articles extends React.Component {
constructor(props) {
super(props);
this.state = {
articles: [],
last_article: ""
}
}
componentWillMount() {
fetch('/last_article', {
headers: {
'Accept': 'text/markdown'
}
})
.then(res => res.text())
.then(txt => marked(txt))
.then(html => {
this.setState({
last_article: html
});
});
}
render() {
return (
<div className="articles">
{this.state.last_article}
</div>
);
}
}
后端工作正常,componentWillMount
获取正确的文本并完美地转换它。但它的渲染效果是这样的:
我不是 React 专家,以前从未遇到过这个问题。
有什么建议吗?
最佳答案
使用我在下面描述的dangerouslySetInnerHTML
方法。
class Articles extends React.Component {
constructor(props) {
super(props);
this.state = {
articles: [],
last_article: ""
}
}
componentWillMount() {
this.setState({
last_article: `<h1>Hello</h1>`
});
}
getMarkdownText() {
return { __html: this.state.last_article };
}
render() {
return (
<div className="articles" dangerouslySetInnerHTML={this.getMarkdownText()}/>
);
}
}
ReactDOM.render(
<Articles />,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
关于javascript - react : HTML not rendering correctly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45408208/