ReactJS 下拉菜单不工作 backdrop-filter

Question

我正在尝试将模糊背景滤镜添加到我在 React js 项目中的下拉菜单中。但这是行不通的。它适用于所有其他元素，但不适用于此。

我的意思是我需要像下拉菜单中的 header 那样进行模糊处理。 Here image of problem

我真的很想有人帮我解决这个问题。我尝试了很多东西，但对我没有帮助

这个反应代码：

function Header(){
    return(
        <div>
            <div className="Header">
                <div className="Header-Container">
                <img className="Logo" src={Logo} />
                    <div className="search-cont"><input type="search" id="site-search" name="q" placeholder="Поиск..."></input></div>
                    <NavItem >
                        <DropdownMenu/>
                    </NavItem>
                <img id="Basket" src={Basket}/>
                <img id="Profile" src={Profile}/>
                </div>
            </div>
        </div>
    );
}

function NavItem(props){
    const[open, setOpen] = useState(false);
    return(
        <div className="Category">
            <div onClick={() => setOpen(!open)}>
                Все категории
                <img id="DownArrow" src={DownArrow}/>
            </div>

            {open && props.children}
        </div>
);
}
function DropdownMenu(){
    function DropdownItem(props){
        return(
        <div className="menu-item">
            {props.children}
        </div>
        );
    }
    return(
        <div className="dropdown">
            <DropdownItem>
                #Хиты
            </DropdownItem>
        </div>
    );
}

此 SCSS 代码：

body{
  .Header {
    .dropdown{
      backdrop-filter: blur(5px) opacity(100%);
      background: #333333a5 0% 0% no-repeat padding-box;
      display: inline-block;
      box-shadow: inset 0px 0px 35px #c8c8c810, 0px 3px 30px #0000004D;
      border: 1px solid #666666a8;
      border-radius: 15px;
      z-index: 10;
      position: absolute;
      top: 0vh;
      padding-top: 40%;
      padding-left: 20%;
      padding-right: 20%;
      padding-bottom: 40%;
      opacity: 1;
      .menu-item{
        height: 2vw;
        width: 12vw;
        margin-bottom: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        transition: all 0.4s ease-in-out;
        text-align: center;
        font: normal normal bold 18px Montserrat;
        letter-spacing: 1.2px;
        color: #FFFFFF;
        opacity: 1;
        cursor: pointer;
      }
      .menu-item:hover {
        background-color: #FFFFFF28;
      }
    }
    }

Answer 1

永远不要在另一个 React 组件中声明一个 React 组件，因为它会在每次渲染时被销毁并重新创建。

function DropdownItem(props){
                    return(
                    <div className="menu-item">
                        {props.children}
                    </div>
                    );
                }

function DropdownMenu(){
            return(
                <div className="dropdown">
                    <DropdownItem>
                        #Хиты
                    </DropdownItem>
                </div>
            );
        }

我在 stackblitz 上试过你的代码，它似乎有效：https://stackblitz.com/edit/react-onrm6s?file=src%2FApp.js

确保您已更新浏览器，因为 backdrop-filter 并非所有浏览器都支持。

ReactJS 下拉菜单不工作 backdrop-filter

ReactJS dropdown menu not working backdrop-filter

javascript

css

reactjs

sass