Ant Design table 行 class name 多个条件

Question

我有一个来自 Ant Design 组件库的 table，我一直在应用有条件的 class 名称。我想添加另一个条件，但我的语法一定是错误的。第一个条件有效，但在添加 (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 }} 
  />

Answer 1

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

因此，条件如下：

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

Answer 2

在我看来，最好不要使用嵌套的三元运算符，如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 }} 
/>

Ant Design table 行 class name 多个条件

Ant Design table row class name multiple conditions

reactjs

ant-design-pro