Ant Design 表行类名多个条件答案

【问题标题】：Ant Design table row class name multiple conditionsAnt Design 表行类名多个条件
【发布时间】：2021-07-03 16:49:53
【问题描述】：

我有一个来自 Ant Design 组件库的表，我一直在应用条件类名称。我想添加另一个条件，但我的语法一定是错误的。第一个条件有效，但在添加 (record.current_price === 'Timeout' && "red") 后，我遇到了一个空白页。

这是我在下面尝试过的：

  <Table 
    columns={columns} 
    dataSource={context.products} 
    rowClassName={(record, index) => (record.current_price !== record.previous_price && "green") (record.current_price === 'Timeout' && "red")} 
    onChange={onChange} 
    pagination={{ pageSize: 100 }} 
  />

【问题讨论】：

标签： reactjs ant-design-pro

【解决方案1】：

在我看来，最好不要使用嵌套三元运算符，就像eslint/no-nested-ternary 中所说的那样。所以考虑这样做：

<Table 
  columns={columns} 
  dataSource={context.products} 
  rowClassName={(record, index) => {
    if (record.current_price !== record.previous_price) {
      return "green";
    }
    if (record.current_price === 'Timeout') {
      return "red";
    }
    return null;
  }
  onChange={onChange} 
  pagination={{ pageSize: 100 }} 
/>

【讨论】：

【解决方案2】：

使用三元运算符将解决您的问题。

所以，条件是这样的：

rowClassName={record.current_price !== record.previous_price ? "green" : (record.current_price === 'Timeout' ? "red" : null)}

【讨论】：