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?
          (
            {text}
          ) : {text}
      );

    }
  }];
  

では、スコアの列では、100点未満のデータが表示されると、その数字のフォントの色が赤くなります.
例2:この列のヘッダーを操作したらどうしますか.簡単で乱暴な直接書きは、以下の通りです.

  {
    title: 
  
,
    dataIndex: 'kpi_score',
    key: 'kpi_score',
  }

例3:コンポーネントのデフォルトtitleを変更するにはどうすればいいですか?依然として簡単で乱暴な直接書きは、以下の通りです.

 GS       
     
         ：{gsTime}
   

}
bordered={false}>
例4:classNameを複数追加するにはどうすればいいですか?文字列テンプレート:

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

方法のまとめ:直接データの中で方法を書いてレンダリングをして、データにDOMを駆動して変化させます.
react道は長いので、すべての穴を渡ってから彼岸に着くことができます.