Использование условий в Действиях Списка AntD

Question

Я пытаюсь использовать условия для массива действий в компоненте AntD List. Следующее действие следует добавлять, только если пользователь является администратором и число> 0. Но кажется, что я не могу предоставить такие условия внутри действий.

 <List dataSource={items} 
                  itemLayout="horizontal"
                  renderItem={item => (
                      <List.Item
                        actions={[
                            {isAdmin && item.count > 0 && <Button onClick={this.moveItemUp(item.key)}>up</Button>,}
                            <a key="list-loadmore-more">more</a>]}
                      >
                        ...
                      </List.Item>
                  )}

Есть идеи, как решить?

Answer 1

Вы можете переместить условие isAdmin и item.count> 0 за пределы возвращаемого значения и передать динамически созданный массив, как показано ниже

import React from 'react';

export default class App extends React.Component {

  render() {

      let actionList = [<a key="list-loadmore-more">more</a>];
      if(isAdmin && items.length > 0) actionList.push(<Button onClick={this.moveItemUp(item.key)}>up</Button>)

    return (
      # your code
      <List dataSource={items} 
              itemLayout="horizontal"
              renderItem={item => (
                  <List.Item
                    actions={actionList}
                  >
                    ...
                  </List.Item>
              )}
      # your code
    )
  }
}

Answer 2

React автоматически игнорирует любые значения null или false в render, поэтому вы можете оставить значения такими, какие они есть:

 <List dataSource={items} 
  itemLayout="horizontal"
  renderItem={item => (
      <List.Item
        actions={[
            isAdmin && item.count > 0 && <Button onClick={this.moveItemUp(item.key)}>up</Button>,
            <a key="list-loadmore-more">more</a>]}
      >
        ...
      </List.Item>
  )}
></List>

Пример Stackblitz

РЕДАКТИРОВАТЬ: Если вы хотите избежать передачи элемента в целом, вы можете использовать оператор распространения для этого:

actions={[
  <a key="list-loadmore-edit">edit</a>,
  ...(condition ? [<a>Another</a>] : []), 
]}