使用 React Bootstrap Table 中的类修改行数据答案

【问题标题】：Modifying row data using classes in React Bootstrap Table使用 React Bootstrap Table 中的类修改行数据
【发布时间】：2018-03-20 18:01:17
【问题描述】：

我正在使用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。

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

谢谢。

【问题讨论】：

更多代码更少 css 你尝试了什么

标签： reactjs react-bootstrap-table

【解决方案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;
}));

【讨论】：