如何危险地使用SetInnerHTML

Posted 2023-03-15

【中文标题】如何危险地使用SetInnerHTML

【英文标题】：How to use dangerouslySetInnerHTML

【发布时间】：2021-07-24 19:34:48

【问题描述】：

我有 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;

【参考方案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

【讨论】：

非常感谢。我也会研究 dompurify！