如何访问危险html显示的数据

Question

我在反应挂钩中使用危险的HTML显示了一些表

现场演示：现场演示代码沙盒

数据看起来像这个

export const json = [
{
template: `
<div ref={tableRef} className="table">
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
</tbody>
</table>
</div>
`
}
];

这里使用危险的HTML 显示数据

......
export default function App(props) {
const tableRef = useRef("");
let tables = data.json;
return (
<div className="App">
<input type="text" />
<div
ref={tableRef}
dangerouslySetInnerHTML={{ __html: tables[0].template }}
/>
</div>
);
}

问题：我需要做什么才能访问此表中的表数据(假设我想在输入更改时更改名称(

Answer 1

首先，要小心这种方法，因为这是一种容易让用户受到XSS攻击的方法。

通常，从代码中设置HTML是有风险的，因为它很容易在不经意间让用户受到跨站点脚本(XSS(攻击。因此，您可以直接从React设置HTML，但必须键入dangerouslySetInnerHTML并传递带有__HTML键的对象，以提醒自己这是危险的。

也就是说，在这种情况下，您必须访问&手动管理危险设置的HTML。由于这是一个教科书式的例子；副作用"；在CCD_ 1内进行管理。

React组件中的数据获取、设置订阅和手动更改DOM都是副作用的例子。-https://reactjs.org/docs/hooks-effect.html

假设您为输入创建了一个状态值iVal，您可以像这样更改表文本：

// ... New state:
const [iVal, setIVal] = React.useState("");
// ...
React.useEffect(() => {
console.log(tableRef);
if (iVal) {
tableRef.current
.getElementsByTagName("tbody")[0]
.getElementsByTagName("td")[1].innerHTML = iVal;
}
}, [iVal, tableRef]);
// ... Updated input:
<input
type="text"
value={iVal}
onChange={(e) => setIVal(e.target.value)}
/>
// ...

因此，由于依赖数组([iVal, tableRef](，useEffect将在iVal(或tableRef(更改时更新。

从代码沙盒派生的工作示例：

• https://codesandbox.io/s/how-to-access-data-displayed-by-dangerous-html-stocu?file=/src/App.js

Answer 2

按照您的设置方式，从技术上讲，您可以通过使用tableRef.current间接访问表数据，这将为您提供对HTMLDivElement对象的引用，但几乎可以肯定的是，您最好将此代码重构为，而不是使用dangerouslySetInnerHTML。

相反，您可能需要考虑将表数据存储为对象数组，如：

[{firstName: "Mark", lastName: "Otto"}, {firstName: "Jack", lastName: "Antonoff"}]

您可以使用useState挂钩来存储和更新它。为了循环并显示数据，您可以使用React文档中详细介绍的简单映射函数，并为数组中的每个元素输出一个表行。

这里是一个简单的工作示例。