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

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

我在响应钩子中使用危险的 HTML 来显示表格

现场演示：live demo code sand box

数据看起来像这样

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>
    `
  }
];

这里使用dangerousHTML显示数据

......

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>
  );
}

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

解决方法

首先，小心这种方法，如it's an easy way to open your users to XSS attacks。

一般来说，从代码中设置 HTML 是有风险的，因为很容易在不经意间让您的用户遭受跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 设置 HTML，但你必须输入危险的SetInnerHTML 并传递一个带有 __html 键的对象，以提醒自己这是危险的。

也就是说，在这种情况下，您必须手动访问和管理危险设置的 HTML。 由于这是“副作用”的教科书示例，因此请在 useEffect 内进行管理。

在 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)}
  />
  // ...

因此，由于 dependency array ([iVal,tableRef])，您的 useEffect 会在 iVal（或 tableRef）更改时更新。

从你的代码和盒子中分叉出来的工作示例：

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

,

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

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

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

您可以使用 useState hook 存储和更新它。要循环并显示数据，您需要使用一个简单的 map 函数作为 detailed in the React docs 并为数组中的每个元素输出一个表格行。

Simple working example here.