Reactjs 基于值的样式单元格-Reactabular

我想实现基于值的单元格样式。如果单元格的值在某个范围内，则应具有不同的背景颜色

下面是我的子组件实现，它只获取列并进行排序

    import React, {Component} from 'react';
    import {connect} from 'react-redux';
    import {sortColName} from '../../actions/index';

    class DashboardColumns extends Component {
      componentDidMount() {
        this.props.onRef(this);
      }
      componentWillUnmount() {
        this.props.onRef(undefined);
      }

      columnClick = (dataField) => {
        const sortField = {
          sortColName: dataField,
          sortDir: this.props.sortColDir === 'asc' ? 'desc' : 'asc',
        };

        this.props.sortColName(sortField);
      };

      sortFormatter = (label, column) => {
        if (column === this.props.sortCol) {
          if (this.props.sortColDir === 'asc') {
            return <i><span className="glyphicon glyphicon-triangle-top" />{label}</i>;
          } else return <i><span className="glyphicon glyphicon-triangle-bottom" />{label}</i>;
        }
        return label;
      };

      percentageFormatter = cell => (<span>{cell} %</span>);

      styleFormatter = (cell) => {
        if (cell >= 95) {
          return <span className="green-background">{cell}</span>;
        } else if (cell < 95 && cell > 79) {
          return <span className="yellow-background">{cell}</span>;
        }
        return <span className="red-background">{cell}</span>;
      };

      columns = [
        {
          property: 'database_name',
          header: {
            label: 'Database Name',
            formatters: [label => this.sortFormatter(label, 'db_name')],
            transforms: [
              property => ({
                onClick: () => this.columnClick('db_name')
              })
            ]
          }
        }, {
          property: 'target_address',
          header: {
            label: 'Target Address',
            formatters: [label => this.sortFormatter(label, 'target_address')],
            transforms: [
              property => ({
                onClick: () => this.columnClick('target_address')
              })
            ]
          }
        }, {
          property: 'db_type',
          header: {
            label: 'Database Type',
            formatters: [label => this.sortFormatter(label, 'db_type')],
            transforms: [
              property => ({
                onClick: () => this.columnClick('db_type')
              })
            ]
          }
        }, {
          property: 'environment_classification',
          header: {
            label: 'Environment',
            formatters: [label => this.sortFormatter(label, 'environment_classification')],
            transforms: [
              property => ({
                onClick: () => this.columnClick('environment_classification')
              })
            ]
          }
        }, {
          property: 'non_comp_acc',
          header: {
            label: '# of Non-Compliant Accounts',
            formatters: [label => this.sortFormatter(label, 'non_compliant')],
            transforms: [
              property => ({
                onClick: () => this.columnClick('non_compliant')
              })
            ]
          }
        }, {
          property: 'comp_acc',
          header: {
            label: '# of Compliant Accounts',
            formatters: [label => this.sortFormatter(label, 'compliant')],
            transforms: [
              property => ({
                onClick: () => this.columnClick('compliant')
              })
            ]
          }
        }, {
          property: 'percentage_compliant',
          header: {
            label: 'Percentage Compliant',
            formatters: [label => this.sortFormatter(label, 'percentage_compliant')],
            transforms: [
              property => ({
                onClick: () => this.columnClick('percentage_compliant')
              })
            ]
          },
          cell: {
            formatters: [this.percentageFormatter],
            transforms: [
              value => this.styleFormatter(value)
            ]
          }
        }];

      render() {
        return null;
      }
    }

    const mapStateToProps = state => ({
      sortCol: state.getSortColName.sort.sortColName,
      sortColDir: state.getSortColName.sort.sortDir,
    });

    const mapDispatchToProps = dispatch => ({
      sortColName: dataField => dispatch(sortColName(dataField)),
    });

    export default connect(mapStateToProps, mapDispatchToProps)(DashboardColumns);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../../actions/index”导入{sortColName}；
类DashboardColumns扩展组件{
componentDidMount（）{
this.props.onRef（this）；
}
组件将卸载（）{
此.props.onRef（未定义）；
}
columnClick=（数据字段）=>{
常数sortField={
sortColName:数据字段，
sortDir:this.props.sortColDir=='asc'？'desc'：'asc'，
};
this.props.sortColName（sortField）；
};
sortFormatter=（标签、列）=>{
if（列===this.props.sortCol）{
if（this.props.sortColDir==='asc'）{
返回{label}；
}else返回{label}；
}
退货标签；
};
percentageFormatter=cell=>（{cell}%）；
样式格式化程序=（单元格）=>{
如果（单元格>=95）{
返回{cell}；
}else if（单元格<95&&单元格>79）{
返回{cell}；
}
返回{cell}；
};
列=[
{
属性：“数据库名称”，
标题：{
标签：“数据库名称”，
格式化程序：[label=>this.sortFormatter（标签'db_name'）]，
转换：[
属性=>({
onClick:（）=>this.columnClick（'db_name'））
})
]
}
}, {
属性：“目标地址”，
标题：{
标签：“目标地址”，
格式化程序：[label=>this.sortFormatter（label，'target_address'）]，
转换：[
属性=>({
onClick:（）=>this.columnClick（'target_address'））
})
]
}
}, {
属性：“db_类型”，
标题：{
标签：“数据库类型”，
格式化程序：[label=>this.sortFormatter（label'db_type'）]，
转换：[
属性=>({
onClick:（）=>this.columnClick（'db_type'））
})
]
}
}, {
属性：'environment_classification'，
标题：{
标签：“环境”，
格式化程序：[label=>this.sortFormatter（label'environment_classification'），
转换：[
属性=>({
onClick:（）=>this.columnClick（'environment\u classification'））
})
]
}
}, {
属性：'non_comp_acc'，
标题：{
标签：“#不符合规定的账户”，
格式化程序：[label=>this.sortFormatter（label，'non_compliance'）]，
转换：[
属性=>({
onClick:（）=>this.columnClick（'non_compliant'）
})
]
}
}, {
属性：“comp_acc”，
标题：{
标签：“#合规账户”，
格式化程序：[label=>this.sortFormatter（label，'compliant'），
转换：[
属性=>({
onClick:（）=>this.columnClick（'compliant'））
})
]
}
}, {
属性：“符合百分比”，
标题：{
标签：“符合百分比”，
格式化程序：[label=>this.sortFormatter（label，'percentage_compliant'），
转换：[
属性=>({
onClick:（）=>this.columnClick（'percentage_compliant'））
})
]
},
单元格：{
格式化程序：[此.percentageFormatter]，
转换：[
value=>this.styleFormatter（值）
]
}
}];
render（）{
返回null；
}
}
常量mapStateToProps=状态=>({
sortCol:state.getSortColName.sort.sortColName，
sortColDir:state.getSortColName.sort.sortDir，
});
const mapDispatchToProps=调度=>({
sortColName:dataField=>dispatch（sortColName（dataField）），
});
导出默认连接（mapStateToProps、mapDispatchToProps）（仪表板列）；

---

请给我一些建议。还有谁能帮我解决格式化程序的问题。我正完美地得到我想要的东西，但是有没有更干净的代码呢？

像这样设置一个转换

styleTransform = (cell) => {
    if (cell >= 95) {
        return { className: 'green-background' }
    }

    ...
};

---

追踪器上的问题：。

这对你有用吗？没有。它基本上是为标签添加道具。你能链接完整的代码吗，这样我就可以看到你在用什么了？当然。给你。@PaulMcloughlin你有空的时候能帮我查一下吗？