Question

我正在使用Dropdown组件构建一个动作菜单，如下所示：

const ActionMenu = ({ children, heading, ...props }) => {    
  return (
    <NavBarTopLeft>
        <Dropdown id={newId("action_menu")} bsSize="small">
            <Dropdown.Toggle>
                <Icon name="bars" before fixedWidth />
                {heading}
            </Dropdown.Toggle>
            <Dropdown.Menu>
                {children}
            </Dropdown.Menu>
        </Dropdown>
    </NavBarTopLeft>
  );
};

我在这里面临的问题是，这里的孩子是一堆不同的MenuItem，如果他们应该渲染，都会有权限检查。所以有时候我最终得到的孩子会变成：

<!-- react-empty: 644 --><!-- react-empty: 645 --><!-- react-empty: 646 --><!-- react-empty: 647 -->

所以我的问题是，如果有任何方法（css或反应），我可以有条件地隐藏Dropdown，如果是这样的话。尝试使用:: empty选择器，因为那种方式有效，但后来我只针对ul而不是按钮本身。

Answer 1

嗯，我知道你需要在没有菜单项时隐藏下拉菜单。菜单项来自children。因此，当children指向null时，按照条件

隐藏下拉列表

    const ActionMenu = ({ children, heading, ...props }) => {    
      return (
        <NavBarTopLeft>
           { 
             children != null && 
               <Dropdown id={newId("action_menu")} bsSize="small">
                <Dropdown.Toggle>
                    <Icon name="bars" before fixedWidth />
                    {heading}
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    {children}
                </Dropdown.Menu>
              </Dropdown>
           }
        </NavBarTopLeft>
      );
    };

没有呈现的MenuItem时隐藏下拉列表

1 个答案: