reactjs - 如何危险地使用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

它不起作用，因为您不能在 .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 中使用 data 变量，而不是在 jsx 中调用该函数。

使用 DomPurify 之类的包来避免 xss 攻击也会很好。

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