如何在使用tableHead与tableData配置的React表格中插入按钮

分两种场景处理：

场景1：Table为自定义封装组件 #

你需要先调整Table组件内部的单元格渲染逻辑，原有逻辑大概率是将tableData传入的所有内容强制转为字符串渲染，只要改为直接渲染传入值即可支持渲染React组件：

// Table组件内部原错误的单元格渲染逻辑
<td>{cell.toString()}</td>

// 修改后支持组件渲染的逻辑
<td>{cell}</td>

调整后你可以直接在tableData的Action列对应位置插入按钮组件，示例代码如下：

// 按钮点击事件处理
const handleSell = (productName) => {
  // 写你的业务逻辑，比如弹出确认框、发起请求等
  console.log("卖出产品：", productName)
}

<CardBody>
  <Table
    tableHeaderColor="warning"
    tableHead={[
      "Name",
      "Market Value",
      "Total Holding Value",
      "Face Value",
      "Maturity Date",
      "Total Interest Received",
      "Action",
    ]}
    tableData={[
      [
        "PBS17",
        "Rp 93,000",
        "Rp 9,300,000",
        "Rp 1,000,000",
        "30/6/2027",
        "Rp 525,000",
        <button 
          key="sell-PBS17"
          onClick={() => handleSell("PBS17")}
          style={{
            background: "#e53935",
            color: "#fff",
            border: "none",
            padding: "6px 16px",
            borderRadius: "4px",
            cursor: "pointer"
          }}
        >
          Sell
        </button>
      ],
    ]}
  />
</CardBody>

场景2：Table为第三方UI库组件 #

先查阅对应组件的官方文档，查找自定义单元格渲染相关的配置，大部分UI库的表格组件都会支持给指定列配置渲染函数，你可以给最后一列Action配置渲染逻辑，返回你需要的按钮组件即可。
如果所用的第三方Table确实不支持自定义单元格内容，你可以封装一个高阶组件，在传入tableData之前遍历替换最后一列为按钮组件再传入。

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