Axios 使用 reactjs 返回混乱 HTML

Question

我正在尝试从另一个文件中获取 html，将其设置为状态并使用 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 作为上面的注释或者使用像 html-to-react 这样的 npm 库：https://www.npmjs.com/package/html-to-react

Answer 3

<h1>green</h1>需要编码成<h1>green</h1>.

那么你就可以使用：

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

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

Axios 使用 reactjs 返回混乱 HTML

Axios returning jumble HTML with reactjs

javascript

reactjs

babeljs

axios