在給予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>,
    dataIndex: 'kpi_score',
    key: 'kpi_score',
  }

舉例3：更改組件默認title怎麼操做？
依然簡單粗暴的直接寫，以下：

<Card title={
   <div>GS重點工做任務 
     <span style={{fontSize:'14px',marginLeft:'1em',fontWeight:'normal'}}>
     截至時間：{gsTime}</span>
   </div>
   } 
  bordered={false}>
  <NestedTable/>
</Card>

舉例4：添加多個className怎麼搞？
字符串模板，以下：

className={`${style.GSTable} ${style.oo}`}/>

方法小結：
直接在數據裏寫方法作渲染，讓數據去驅動DOM作出改變。

react路漫漫，趟過全部坑才能到達彼岸