如何在react-bootstrap-table-next中通过类修改状态为Failed的行数据？

嘿，这个需求其实很容易实现，react-bootstrap-table-next提供了专门的rowClasses属性来帮我们自定义行的类名，具体操作看下面：

步骤1：编写行类名判断函数 #

我们可以写一个函数，接收每一行的数据作为参数，根据status字段返回对应的类名：

const getRowClasses = (row) => {
  // 当status为Failed时返回自定义类，否则返回空
  return row.status === "Failed" ? "failed-row" : "";
};

步骤2：在BootstrapTable中配置该函数 #

把上面的函数传给BootstrapTable组件的rowClasses属性：

import BootstrapTable from "react-bootstrap-table-next";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";

// 你的数据
const tableData = [
  { color: "red", value: "#f00", status: "Success" },
  { color: "green", value: "#0f0", status: "Success" },
  { color: "blue", value: "#00f", status: "Failed" },
  { color: "cyan", value: "#0ff", status: "Failed" },
  { color: "magenta", value: "#f0f", status: "Success" },
  { color: "yellow", value: "#ff0", status: "Failed" },
  { color: "black", value: "#000", status: "Success" }
];

// 定义列配置
const columns = [
  { dataField: "color", text: "Color Name" },
  { dataField: "value", text: "Hex Value" },
  { dataField: "status", text: "Status" }
];

function ColorTable() {
  return (
    <BootstrapTable
      keyField="color"
      data={tableData}
      columns={columns}
      rowClasses={getRowClasses} // 这里传入我们的判断函数
    />
  );
}

export default ColorTable;

步骤3：添加CSS样式 #

最后给我们的自定义类写样式，比如让失败的行背景变浅红，文字颜色加深：

.failed-row {
  background-color: #ffebee;
  color: #c62828;
}

/* 可选：hover状态也可以调整 */
.failed-row:hover {
  background-color: #ffcdd2;
}

这样就能实现所有status为Failed的行自动应用这个样式啦，是不是很简单？

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