反應：HTML無法正確呈現

Question

我有這個React組件，其主要目標是在將marked為的文章轉換為HTML之后，呈現文章存儲的廣告MarkDown（.md文件）。

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專家，以前從未遇到過這個問題。

有什么建議么？

Answer 1

使用我下面描述的dangerouslySetInnerHTML方法。

瀏覽此鏈接以查看有關dragonallySetInnerHTML及其副作用的正確文檔。

 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> 

Answer 2

就像其他人所說的那樣，危險地SetInnerHTML可以正常工作，但是如果您發現自己經常這樣做， 請查看這個很棒的lib 。