在给予react的ANTD中如何改变表格中某一项单元格?

因为react理念是反对直接才做DOM的,完全使用数据驱动DOM做出渲染。习惯了锋利的JQuery的我们如何在表格里直接操作某一项呢?
举例:要将小于100分的单元格字体标红?如何操作?

直接贴代码,如下:

const columns = [
  {
    title: '指标',dataIndex: 'kpi_name',key: 'kpi_name'
  },{
    title: '预期',dataIndex: 'kpi_target',key: 'kpi_target',},{
    title: '实际',dataIndex: 'kpi_finish',key: 'kpi_finish',{
    title: '评分',dataIndex: 'kpi_score',key: 'kpi_score',render: (text,record) => {
      return (
        text < 100?
          (
            <span style={{color:'red'}}>{text}</span>
          ) : <span>{text}</span>
      );

    }
  }];

那么在评分这一列,一旦出现低于100分的数据,该数字的字体颜色就会变红。

举例2:要是操作这一列的表头怎么办?
简单粗暴的直接写,如下:

{
    title: <div style={{color:'red'}}>评分</div>,}

方法小结:
直接在数据里写方法做渲染,让数据去驱动DOM做出改变。

react路漫漫,趟过所有坑才能到达彼岸

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...