Ant Design Table组件rowClassName多条件类名设置语法错误致页面空白

你当前的代码存在JS语法层面的运行时错误，直接导致React渲染中断、页面空白：

• 两个括号表达式直接并列书写时，JS引擎会将前一个括号的返回值（比如条件满足时返回的字符串"green"）判定为可执行函数，尝试把后一个括号的执行结果作为入参调用这个字符串
• 字符串类型本身不是可执行函数，调用时会抛出TypeError: "green" is not a function，整个组件树渲染失败，就会出现白屏现象

可以根据项目实际依赖情况，选择以下任意一种合法写法：

• 原生数组收集拼接写法（无额外依赖，兼容性最佳）
  逻辑清晰易维护，适合所有业务场景：

  <Table 
    columns={columns} 
    dataSource={context.products} 
    rowClassName={(record, index) => {
      const classList = []
      // 原有价格变动匹配绿色类的逻辑
      if (record.current_price !== record.previous_price) {
        classList.push('green')
      }
      // 新增Timeout状态匹配红色类的逻辑
      if (record.current_price === 'Timeout') {
        classList.push('red')
      }
      // 拼接为合法的类名字符串返回
      return classList.join(' ')
    }}
    onChange={onChange} 
    pagination={{ pageSize: 100 }} 
  />
  

• 内联模板字符串写法（适合简单逻辑场景）
  不需要写完整的函数块，适合判断条件较少的场景：

  rowClassName={(record, index) => 
    `${record.current_price !== record.previous_price ? 'green' : ''} ${record.current_price === 'Timeout' ? 'red' : ''}`.trim()
  }
  

  注意：条件不满足时对应返回空字符串，最后通过trim()清除字符串首尾的多余空格，避免生成无意义的空白类名。
• clsx工具写法（适合中大型项目）
  如果项目已经引入clsx这类轻量类名拼接工具，可以进一步简化判断逻辑：

  import clsx from 'clsx'
  // Table组件配置
  rowClassName={(record, index) => clsx({
    green: record.current_price !== record.previous_price,
    red: record.current_price === 'Timeout'
  })}
  

如果两个判断条件存在优先级要求（例如处于Timeout状态的行不需要叠加绿色类），可以在类名收集环节增加判断逻辑，避免多个类名同时生效导致的样式冲突。

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