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

它不起作用，因为您无法返回outside.then方法，而且您还会遇到reender循环。。。您可以将该方法放入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