如何在React中修改后端返回的HTML并为每行<tr>添加按钮？

直接用dangerouslySetInnerHTML渲染的话没法直接修改生成的DOM元素，得先解析后端的HTML字符串，修改后再重新渲染，具体操作步骤如下：

1. 解析HTML字符串为可操作的DOM对象
   用浏览器原生的DOMParser工具，把后端返回的HTML字符串转换成能直接操作的DOM结构。

2. 遍历所有<tr>并插入按钮元素
   从解析后的DOM里取出所有<tr>标签，给每个行创建需要的按钮（或其他元素），为了不破坏表格布局，建议把按钮放在单独的<td>里再添加到行末尾。

3. 把修改后的DOM转回HTML字符串
   将处理好的DOM结构重新转成HTML字符串，再传给dangerouslySetInnerHTML完成渲染。

完整代码示例 #

// 后端返回的表格格式HTML字符串
let 后端表格HTML = `
<table>
  <tr><td>第一行数据1</td><td>第一行数据2</td></tr>
  <tr><td>第二行数据1</td><td>第二行数据2</td></tr>
</table>
`

// 解析HTML字符串
const parser = new DOMParser();
const doc = parser.parseFromString(后端表格HTML, 'text/html');

// 获取所有tr元素
const trList = doc.querySelectorAll('tr');

trList.forEach(tr => {
  // 创建按钮元素
  const 操作按钮 = doc.createElement('button');
  操作按钮.textContent = '查看详情';
  // 绑定原生点击事件（不能用React的onClick语法）
  操作按钮.addEventListener('click', () => {
    // 示例：获取当前行的所有单元格内容
    const 当前行数据 = Array.from(tr.querySelectorAll('td')).map(td => td.textContent);
    console.log('当前行数据:', 当前行数据);
  });

  // 创建存放按钮的td
  const 按钮单元格 = doc.createElement('td');
  按钮单元格.appendChild(操作按钮);
  // 把按钮单元格加到行末尾
  tr.appendChild(按钮单元格);
});

// 转换回HTML字符串
const 修改后的HTML = doc.body.innerHTML;

return (
  <div dangerouslySetInnerHTML={{ __html: 修改后的HTML }}></div>
)

注意点 #

• 事件绑定必须用原生的addEventListener，不能用React的事件语法，因为这里是直接操作原生DOM。
• 确保后端返回的HTML是可信内容，避免XSS风险——毕竟dangerouslySetInnerHTML本身就存在安全隐患。
• 如果表格结构复杂，要提前确认修改逻辑不会打乱原有布局，比如不要直接把按钮插入到已有单元格中。

内容的提问来源于stack exchange，提问作者Ajay Jha