ReactJS下拉選單不起作用背景過濾器

我正在嘗試在 react js 專案的下拉選單中添加模糊背景過濾器。但這是行不通的。它適用于所有其他元素，但不適用于此。

我的意思是我需要像下拉選單中的標題一樣模糊。 這里是問題的影像

我真的很想知道有人幫我解決這個問題。我嘗試了很多事情，但這對我沒有幫助

這個反應代碼：

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;
      }
    }
    }

uj5u.com熱心網友回復：

• 永遠不要在另一個 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/App.js

確保您已更新瀏覽器，因為并非所有瀏覽器都支持背景過濾器。

標籤：javascript css 反应 粗鲁的

上一篇：設計模式學習筆記（十一）外觀模式及其應用場景

下一篇：設計模式之：抽象工廠模式AbstractFactoryPattern的實作