Axios 使用 reactjs 返回混乱的 HTML

Question

我试图从另一个文件中获取 html，将其设置为 state 并使用 react 渲染到我的网页。但是，当我在页面上呈现结果时，它会继续以混乱的 HTML 形式出现（html 显示为纯文字）。经过几个小时的测试，看起来响应是作为字符串出现的，这就是它打印单词的原因，但我该如何防止这种情况发生。<script type="text/babel">    class myClass extends React.Component {        constructor() {            super();            this.state = {resultState: ""};        };        componentDidMount() {            axios.post(`mysite.com/page.php`) //in this file it says <h1>green</h1>            .then(res => {                console.log(res.data);                this.setState({ resultState: res.data });            })        }        changeColor = () => {            this.setState({resultState: <h1>blue</h1>});        };        render() {            return (                <div>                {this.state.resultState}                </div>            )         }     }     ReactDOM.render(<myClass />, document.getElementById('mydiv'))</script>它不断返回，<h1>green</h1>而不是一个大字“绿色”。在控制台中它确实显示为 html（代码像文件一样缩进）

Answer 1

您需要使用 dangerouslySetInnerHTML 来解析 HTML

return (

  <div dangerouslySetInnerHTML={{__html: this.state.resultState}} />

)

Answer 2

你有两种方法：使用 dangerouslySetInnerHTML 作为上面的评论或使用 npm 库，如html-to-react：https ://www.npmjs.com/package/html-to-react

Answer 3

<h1>green</h1>需要编码成&lt;h1&gt;green&lt;/h1&gt;.

然后你就可以使用：

render() {

            return (

                <div>

                {this.state.resultState}

                </div>

            )

         }

（您可以通过将 HTML 标记字符替换为 来对文本进行> < /编码str.replace()）