reactjs - 使用 React Bootstrap Table 中的类修改行数据

Question

我正在使用react-bootstrap-table-next来显示我的数据。

这是我要显示的数据。

[
    {
        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"
    }
]

如果状态失败，我想添加类“glyphicon-remove-sign”，如果成功，使用这个 glyphicon-ok-sign。

我该如何去修改数据和类？现在它显示文本，但我想要符号。

谢谢。

Answer 1

您可以map覆盖数据数组并有条件地将类添加到每个对象：

const data = [
    {
        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"
    }
];

console.log(data.map( d => {
  d.class = d.status.toLowerCase() === 'failed' ? 'glyphicon-remove-sign' : 'glyphicon-ok-sign';
  return d;
}));