嘿，作为编程新手能完成第一个React项目已经超棒啦！咱们一步步来实现你要的「数值大于50显示红色，小于20显示绿色」的效果～

核心思路 #

Ant Design的Table组件中，每个Column都支持render属性——这个属性允许你自定义单元格的内容和样式。我们可以利用它来判断单元格的值，动态设置文字颜色。

步骤1：定义颜色判断的辅助函数 #

首先，在你的App组件里添加一个复用的辅助函数，用来根据数值返回对应的样式：

const getTextColorStyle = (value) => {
  // 先确保值是数字（避免非数值类型报错）
  const numValue = Number(value);
  if (numValue > 50) {
    return { color: 'red' };
  } else if (numValue < 20) {
    return { color: 'green' };
  }
  // 其他情况保持默认颜色
  return {};
};

步骤2：修改动态生成列的代码 #

你现在是从report.json动态生成列的，所以需要给每个Column加上render属性，调用上面的函数来设置样式。修改后的列生成逻辑如下：

const items = report.data.columns.map(item => (
  item.subHeader ? (
    <ColumnGroup title={item.columnName}>
      { item.subHeader.map((it, index) => (
        <Column 
          title={it.name} 
          dataIndex={it.dataIndex} 
          key={index} // 用index作为key避免重复，更可靠
          render={(value) => <span style={getTextColorStyle(value)}>{value}</span>}
        />
      )) }
    </ColumnGroup>
  ) : (
    <Column 
      title={item.columnName} 
      dataIndex={item.dataIndex} 
      key={item.dataIndex} // 用dataIndex作为唯一key
      render={(value) => <span style={getTextColorStyle(value)}>{value}</span>}
    />
  )
));

完整修改后的代码 #

把这些修改整合到你的代码里，最终版本如下：

import React from 'react';
import { Divider, Table, Tag } from 'antd'
import report from './report.json'
import 'antd/dist/antd.css'
import { Header, Header1, TableSchema, Header2, C1,C2,C3,C4,Rank } from './style.js'
const { Column, ColumnGroup } = Table;
const data = [
 { key:'0', class: 'All India', circle: 'All India', subHeader1: 12, subHeader2: 66, subHeader3: 32, subHeader4:52, subHeader5: 74, subHeader6: 32 },
 { key:'1', class: '1', circle: 'GUJ', subHeader1: 42, subHeader2: 16, subHeader3: 70, subHeader4:12, subHeader5: 54, subHeader6: 33 },
 { key: '2', class: '1', circle: 'DEL', subHeader1: 32, subHeader2: 66, subHeader3: 74, subHeader4:22, subHeader5: 42, subHeader6: 31 },
]

class App extends React.Component {
  render() {
    console.log(report)

    // 新增：判断文字颜色的辅助函数
    const getTextColorStyle = (value) => {
      const numValue = Number(value);
      if (numValue > 50) {
        return { color: 'red' };
      } else if (numValue < 20) {
        return { color: 'green' };
      }
      return {};
    };

    // 修改：给每个Column添加render属性
    const items = report.data.columns.map(item => (
      item.subHeader ? (
        <ColumnGroup title={item.columnName}>
          { item.subHeader.map((it, index) => (
            <Column 
              title={it.name} 
              dataIndex={it.dataIndex} 
              key={index}
              render={(value) => <span style={getTextColorStyle(value)}>{value}</span>}
            />
          )) }
        </ColumnGroup>
      ) : (
        <Column 
          title={item.columnName} 
          dataIndex={item.dataIndex} 
          key={item.dataIndex}
          render={(value) => <span style={getTextColorStyle(value)}>{value}</span>}
        />
      )
    ));

    return(
      <div id="root">
        <Header>
          <Header1>
            {report.header.displayName}
          </Header1>
          <Header2>
            DATA - {report.header.month}
          </Header2>
        </Header>
        <TableSchema>
          <Table dataSource={data} bordered title={() => `${report.header.displayName}` }>
            {items}
          </Table>
        </TableSchema>
      </div>
    )
  }
}

export default App;

额外小提示 #

• 我帮你修正了data数组里重复的key（原来有两个key:'0'），避免React警告。
• key属性尽量用唯一的值，比如index或dataIndex，不要用固定字符串，防止重复渲染的问题。

这样修改后，表格里的数值就会按照你的要求显示颜色啦！如果还有其他疑问，随时问～

内容的提问来源于stack exchange，提问作者Anurag Mathur