使用React Bootstrap表中的类修改行数据

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

如果状态失败，我想添加类＆＃34; glyphicon-remove-sign＆＃34;如果是suucess，请使用此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;
}));