Javascript 如何将JSON数据附加到元素，以便稍后在React中检索？

我有一个TableComponent，它从API中提取数据，并试图表示表中的数据。我将写一个最小的可重复的例子

我的渲染方法如下所示：

const tableRows = this.renderTableRow();

return (
    <table>
      <thead>
        <tr>
          <th>Application Name</th>
          <th>Total Valid Licenses</th>
          <th>Current in Use</th>
        </tr>
      </thead>
      <tbody>
        {tableRows}
      </tbody>
    </table>

let row = table.insertRow();
row.dataset.used_by = arr.used_by;
row.dataset.license_server = arr.license_server;
row.addEventListener("click", showModal);

在handleClick上，我想显示一个模态，其中包含该行的used_by数据

使用Vanilla JavaScript，我可以完成如下操作：

const tableRows = this.renderTableRow();

return (
    <table>
      <thead>
        <tr>
          <th>Application Name</th>
          <th>Total Valid Licenses</th>
          <th>Current in Use</th>
        </tr>
      </thead>
      <tbody>
        {tableRows}
      </tbody>
    </table>

let row = table.insertRow();
row.dataset.used_by = arr.used_by;
row.dataset.license_server = arr.license_server;
row.addEventListener("click", showModal);

在showModal中，我可以通过这个.dataset.used被使用。

包装在anon函数中 然后，您可以将当前的arr数据传递给句柄单击，我认为它负责设置弹出窗口

状态管理解决方案

---

您可以在单击时发送redux/context操作来设置currentActiveRow的值。如果您使用Selector或useContext hook，则默认情况下，您的模态始终可以读取此信息。

您可以引用一个my，它可以执行上述操作。模态可以是一个单独的组件，作为道具接收相应行的数据。让您的onClick处理程序像这样传递数据：onClick==>handleClickarr.used\u by，并让它用传递的数据呈现这个新的模态组件。