Javascript Axios使用reactjs返回混乱的HTML

我试图从另一个文件中获取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>

类myClass扩展了React.Component{
构造函数（）{
超级（）；
this.state={resultState:：}；
};
componentDidMount（）{
axios.post（`mysite.com/page.php`）//在这个文件中显示为绿色
。然后（res=>{
console.log（res.data）；
this.setState（{resultState:res.data}）；
})
}
changeColor=（）=>{
this.setState（{resultState:blue}）；
};
render（）{
返回(
{this.state.resultState}
)
}
}
ReactDOM.render（，document.getElementById（'mydiv'））

它不断返回

绿色

，而不是一个大字“绿色”。

---

在控制台中，它确实显示为html（代码与文件一样缩进）

您需要使用危险的html来解析html

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

返回(
)

您有两种方法：使用危险的LysetinerHTML作为上述注释，或使用npm库（如

html）作出反应

：

green

需要编码到

h1green/h1

然后您就可以使用：

render() {
            return (
                <div>
                {this.state.resultState}
                </div>
            )
         }

render（）{
返回(
{this.state.resultState}
)
}

（您可以通过替换HTML标记字符来编码文本，如