亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Axios 使用 reactjs 返回混亂的 HTML

Axios 使用 reactjs 返回混亂的 HTML

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}} />

)


查看完整回答
反對 回復 2022-10-21
?
慕姐4208626

TA貢獻1852條經驗 獲得超7個贊

你有兩種方法:使用 dangerouslySetInnerHTML 作為上面的評論或使用 npm 庫,如html-to-reacthttps ://www.npmjs.com/package/html-to-react


查看完整回答
反對 回復 2022-10-21
?
幕布斯6054654

TA貢獻1876條經驗 獲得超7個贊

<h1>green</h1>需要編碼成&lt;h1&gt;green&lt;/h1&gt;.


然后你就可以使用:


render() {

            return (

                <div>

                {this.state.resultState}

                </div>

            )

         }

(您可以通過將 HTML 標記字符替換為 來對文本進行> < /編碼str.replace())


查看完整回答
反對 回復 2022-10-21
  • 3 回答
  • 0 關注
  • 250 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號