如何危险地使用SetInnerHTML

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

它不起作用，因为你不能 return 在 .then 方法之外，而且你还会遇到重新渲染循环...你可以将方法放在 useEffect 挂钩中，以便它运行一次，并将 return 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

如何危险地使用SetInnerHTML

How to use dangerouslySetInnerHTML

reactjs

dangerouslysetinnerhtml