Cats萌萌
2022-10-21 10:50:50
我試圖從另一個文件中獲取 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(代碼像文件一樣縮進)
3 回答

大話西游666
TA貢獻1817條經驗 獲得超14個贊
您需要使用 dangerouslySetInnerHTML 來解析 HTML
return (
<div dangerouslySetInnerHTML={{__html: this.state.resultState}} />
)

慕姐4208626
TA貢獻1852條經驗 獲得超7個贊
你有兩種方法:使用 dangerouslySetInnerHTML 作為上面的評論或使用 npm 庫,如html-to-react
:https ://www.npmjs.com/package/html-to-react

幕布斯6054654
TA貢獻1876條經驗 獲得超7個贊
<h1>green</h1>需要編碼成<h1>green</h1>.
然后你就可以使用:
render() {
return (
<div>
{this.state.resultState}
</div>
)
}
(您可以通過將 HTML 標記字符替換為 來對文本進行> < /編碼str.replace())
添加回答
舉報
0/150
提交
取消