React菜单项显示隐藏问题：如何不渲染空对象菜单选项

问题原因 #

你当前的代码里，当权限不满足时返回的空对象{}会被当成数组的有效元素，菜单组件会尝试渲染这个空对象（通常表现为空白菜单项）。要让这些选项不被渲染，需要把空对象从options数组里移除。

方案一：用数组过滤移除空对象 #

直接在options数组末尾添加过滤逻辑，把空对象剔除：

renderFilterActions = () => [
  {
    type: 'menu',
    style: { marginRight: 32 },
    onClick: (action) => action(),
    disabled: this.props.exporting,
    options: [
      !getUserPrivileges().canViewArbitrationParcels
        ? {
            disabled: this.props.exporting,
            label: 'Export dlp',
            // 其他属性
          }
        : {
            disabled: this.props.exporting,
            label: 'Download Excel',
            // 其他属性
          },
      {
        disabled: this.props.exporting,
        label: 'export programming',
        // 其他属性
      },
      getUserPrivileges().canRefreshVessel
        ? {
            disabled: this.props.exporting,
            label: 'VVVVVVVVVVVVVV',
            icon: (<Dice style={{ marginLeft: 2, marginTop: 3 }} />),
            action: () => {
              this.handleVesselModalClose();
            },
          }
        : {},
      getUserPrivileges().canRefreshVessel
        ? {
            disabled: this.props.exporting,
            label: 'RRRRRRRRRRRRRRR',
            // 其他属性
          }
        : {}
    ].filter(item => Object.keys(item).length > 0), // 过滤空对象
  },
  { type: 'primary', label: 'actions', disabled: this.props.exporting },
];

方案二：条件添加菜单项（更简洁） #

不用返回空对象，而是用逻辑与&&，只有满足权限条件时才把菜单项加入数组，从根源避免空对象生成：

renderFilterActions = () => [
  {
    type: 'menu',
    style: { marginRight: 32 },
    onClick: (action) => action(),
    disabled: this.props.exporting,
    options: [
      // 第一个选项：必选，保留三元判断
      !getUserPrivileges().canViewArbitrationParcels
        ? {
            disabled: this.props.exporting,
            label: 'Export dlp',
            // 其他属性
          }
        : {
            disabled: this.props.exporting,
            label: 'Download Excel',
            // 其他属性
          },
      // 第二个固定选项
      {
        disabled: this.props.exporting,
        label: 'export programming',
        // 其他属性
      },
      // 第三个选项：满足权限才添加
      getUserPrivileges().canRefreshVessel && {
        disabled: this.props.exporting,
        label: 'VVVVVVVVVVVVVV',
        icon: (<Dice style={{ marginLeft: 2, marginTop: 3 }} />),
        action: () => this.handleVesselModalClose(),
      },
      // 第四个选项：满足权限才添加
      getUserPrivileges().canRefreshVessel && {
        disabled: this.props.exporting,
        label: 'RRRRRRRRRRRRRRR',
        // 其他属性
      }
    ].filter(Boolean), // 过滤掉逻辑与返回的false/undefined
  },
  { type: 'primary', label: 'actions', disabled: this.props.exporting },
];

说明 #

• 方案一适合保留原有三元结构，仅添加过滤逻辑，改动幅度小。
• 方案二更简洁直观，直接避免生成无效元素，代码可读性更高。
• filter(Boolean)会自动移除数组里的false、undefined、null等值；如果用方案一返回空对象，必须用filter(item => Object.keys(item).length > 0)判断对象是否为空。

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