如何在React动态表格的<td>标签中添加操作按钮？

你代码里的核心问题是判断条件中的actions未加引号，会被当成未定义变量，导致逻辑不生效。下面是修正后的完整实现，同时优化了按钮交互和空值处理：

<tbody>
  {data.map((row, index) => (
    <tr key={index}>
      {headers.map((header, i) => {
        // 注意这里的 'actions' 是字符串，必须加引号
        if (header.id === 'actions') {
          return (
            <td key={i}>
              <button onClick={() => handleEdit(row)}>编辑</button>
              <button onClick={() => handleDelete(row.id)}>删除</button>
            </td>
          );
        } else {
          // 字段为空时显示短横线，避免出现undefined
          return <td key={i}>{row[header.id] ?? '-'}</td>;
        }
      })}
    </tr>
  ))}
</tbody>

额外补充优化点： #

• 行数据交互：通过onClick={() => handleEdit(row)}把当前行数据传递给处理函数，方便后续编辑/删除操作获取数据。
• 空值兜底：用?? '-'处理空字段，避免页面显示undefined，提升视觉体验。

在组件中还需要定义对应的操作函数，示例如下：

const handleEdit = (rowData) => {
  // 编写编辑逻辑，比如打开编辑弹窗、跳转编辑页面等
  console.log('待编辑行数据:', rowData);
};

const handleDelete = (rowId) => {
  // 编写删除逻辑，比如调用删除API、更新表格数据等
  console.log('待删除行ID:', rowId);
};

内容的提问来源于stack exchange，提问作者Shashank gb