React javascript 控制在菜单中显示/隐藏项目

Question

我最近开始使用 React Js，并尝试使用三元运算符在菜单中显示和隐藏项目。 我的问题是如何在菜单项为空时不显示它们，换句话说，当我在代码中使用空 {} 时，如图所示。

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',
              ///////
            }
          :
            {}
          
        
    
  ],
},
{ type: 'primary', label: 'actions' , disabled: this.props.exporting }, 

];

Answer 1

这取决于您使用的库是如何实现的。 一般来说，如果给定一个null ，React 不会渲染任何东西——但库可能仍然会渲染一个没有任何内容的容器。

最安全的做法是从列表中删除您不想显示的项目。 一种方法是在您的三元条件下返回null ，然后过滤掉空值：

options: [
  // ---- 8< -----
  getUserPrivileges().canRefreshVessel 
    ? {
      disabled: this.props.exporting,
      label: 'RRRRRRRRRRRRRRR',
      ///////
    }
    : null,
  ].filter(option => !!option),