如何使用dangerouslySetInnerHTML

Question

我有html脚本数据。

我想把它放在div中。但是当我这样做的时候，它只会显示"}“，就是这样。

我想知道我做错了什么。

当我登录newDataHTML时，我可以得到html字符串。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {

  const getData = () => {
    axios
      .get('/api/data')
      .then( (data) => {
        // get new Data
        const newDataHTML = data.data[0].rule;

        return {__html: newDataHTML};
      })
      .catch( err => console.log(err));
  }

  return (
    <div className="App">
      <Tabs defaultTab="data" onChange={(tabId) => { console.log(tabId) }}>
        <TabList>
          <Tab tabFor="data">New Data</Tab>
        </TabList>
        <TabPanel tabId="data">
          <div dangerouslySetInnerHTML={getData()}></div>;
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default App;

Answer 1

它不能工作，因为你不能返回外部的.then方法，而且你也会遇到重现循环...你可以把这个方法放在useEffect钩子中，这样它就会运行一次，还可以把返回的数据放在useState中……

const [data, setData] = useState();
useEffect(() => {
   const getData = () => {
      axios.get('/api/data').then((res) => {
        const newDataHTML = res.data[0].rule;
        setData({__html: newDataHTML})
      }).catch( err => console.log(err));
   }
   getData();
}, [])

现在可以在jsx中使用数据变量，而不是在jsx中调用函数。

使用像DomPurify这样的包来避免xss攻击也会很好。

https://www.npmjs.com/package/dompurify