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

我用危险的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>
    `
  }
];

export const json=[
{
模板：`
#
名字
姓
1.
做记号
奥托
`
}
];

这里我用危险的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>
  );
}

。。。。。。
导出默认功能应用程序（道具）{
const tableRef=useRef（“”）；
让tables=data.json；
返回(
);
}

---

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

首先，请谨慎使用此方法，

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

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

useffect

中进行管理

数据获取、设置订阅以及在React组件中手动更改DOM都是副作用的示例。-

假设您为输入创建一个状态值，

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，setIVal]=React.useState（“”）；
// ...
React.useffect（（）=>{
控制台日志（tableRef）；
国际单项体育联合会{
表参考电流
.getElementsByTagName（“tbody”）[0]
.getElementsByTagName（“td”）[1].innerHTML=iVal；
}
}，[iVal，tableRef]）；
// ... 更新输入：
setIVal（e.target.value）}
/>
// ...

因此，由于（

[iVal，tableRef]

）您的

useffect

将在

iVal

（或

tableRef

）更改时更新

从codesandbox派生的工作示例：

---

首先，注意这种方法，

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

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

useffect

中进行管理

数据获取、设置订阅以及在React组件中手动更改DOM都是副作用的示例。-

假设您为输入创建一个状态值，

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，setIVal]=React.useState（“”）；
// ...
React.useffect（（）=>{
控制台日志（tableRef）；
国际单项体育联合会{
表参考电流
.getElementsByTagName（“tbody”）[0]
.getElementsByTagName（“td”）[1].innerHTML=iVal；
}
}，[iVal，tableRef]）；
// ... 更新输入：
setIVal（e.target.value）}
/>
// ...

因此，由于（

[iVal，tableRef]

）您的

useffect

将在

iVal

（或

tableRef

）更改时更新

从codesandbox派生的工作示例：

---

按照您的设置方式，您可以通过使用

tableRef.current

从技术上间接访问表数据，这将为您提供一个对HTMLdevelment对象的引用，但几乎可以肯定，重构此代码时最好不要使用危险的HTML

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

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

您可以使用

useState

存储和更新此文件。要循环并显示数据，您需要使用一个简单的map函数，并为数组中的每个元素输出一个表行

---

按照您的设置方式，您可以通过使用

tableRef.current

从技术上间接访问表数据，这将为您提供一个对HTMLdevelment对象的引用，但几乎可以肯定，重构此代码时最好不要使用危险的HTML

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

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

您可以使用

useState

存储和更新此文件。要循环并显示数据，您需要使用一个简单的map函数，并为数组中的每个元素输出一个表行

---

是否可以将eg-getElement-by-id与useref一起使用？这样使用时，您将获得一个DOM节点，因此getElemenyById或任何其他“getElement”或“querySelector”方法也应该可以工作。我只是使用了“TagName”，因为我不想编辑HTML字符串。我试着这样做

让chatta=tableRef.current.getElementById（“fname”）

，但我得到了错误

类型错误：tableRef.current.getElementById不是一个函数

我的错，是的，你应该可以访问这里列出的所有内容，其中不包括

getElementById

。因此，要按ID获取，您必须使用

tableRef.current.querySelector（“#name”）

是否可以将eg-getElement-by-ID与useref一起使用？这样使用时，您将获得一个DOM节点，因此getElemenyById或任何其他“getElement”或“querySelector”方法也应该可以工作。我之所以使用“TagName”是因为我不想编辑HTML字符串。我试着这样做

让chatta=tableRef.current.getElementById（“fname”）

，但我得到了错误

类型错误：tableRef.current.getElementById不是一个函数

我的错，是的，您应该可以访问这里列出的所有内容，但不包括