antd中Drop Down的属性简介

export interface DropDownProps {

    trigger?: ('click' | 'hover')[]; // 触发方式

    overlay: React.ReactNode; // 下拉菜单所承载的内容元素，要求为Antd的Menu组件

    style?: React.CSSProperties; // 行内样式

    onVisibleChange?: (visible?: boolean) => void; // 监听下拉菜单出现/消失

    visible?: boolean; // 菜单是否显示

    disabled?: boolean; // 菜单是否可以用

    align?: Object; // 这个参数目前没有被使用

    getPopupContainer?: (triggerNode: Element) => HTMLElement; // 渲染的挂载点，默认为body

    prefixCls?: string; // 样式类的命名前缀

    className?: string; // 样式

    placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';

    // 弹出框与触发点的对齐方式

  }

例如

<Dropdown

                  getPopupContainer={() => document.getElementById('expense-accrual-drop')}

                  trigger={['click']}

                  overlay={

                    <Menu onClick={this.handleCreate}>

                      {expenseType.map(item => <Menu.Item key={item.id}>{item.name}</Menu.Item>)}

                    </Menu>

                  }

                >

                  <Button type="primary">

                    新建费用预提单

                    <Icon type="down" />

                  </Button>

                </Dropdown>

 handleCreate = e => {

    const {dispatch} = this.props;

    dispatch(

      routerRedux.push({

        pathname: '/XXXXXXXXXXXXXXXXXXXXXXXXXXXXX'

          .replace(':XXXXXXXXXXXXXXXXX', e.key)

          .replace(':XXX', 'XXXX'),

      })

    );

  };

实际使用中根据公司的要求来,Antd的下拉菜单组件中有一个点，就是他的内部元素必须是Antd的Menu组件,我这里通过调用方法来获取内容.onClick={this.handleCreate}