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 来解析 HTMLreturn (&nbsp; <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() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.resultState}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}（您可以通过将 HTML 标记字符替换为 来对文本进行> < /编码str.replace()）