具有透明的引导程序导航栏，希望导航栏保持透明，但对于单击要着色的汉堡包后出现的菜单

问题描述

我是一个非常初级的开发人员，我在ReactJS中创建一个网站，在页面顶部，我将一个引导Navbar设置为Transparent，当您滚动它时，它会变为彩色。如果菜单项的背景颜色不是透明的，那么当您单击“汉堡包”时，我希望这样做。我有一个全屏图像，透明导航栏位于该图像的顶部，并且如果没有背景色，菜单就不会真正可见...谢谢您的帮助。

JSX .....

import React,{ Component } from 'react';
import { Link } from 'react-router-dom';
import $ from "jquery"
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav,Navbar,NavDropdown  } from 'react-bootstrap';
// import Navbar from 'react-bootstrap/Navbar'
import './transnav.css';


export default class TransNavigationBar extends Component {

componentDidMount() {

(document).ready(function() {

(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     //>=,not <=
    if (scroll >= 610) {
        //clearHeader,not clearheader - caps H
        $(".navbar").addClass("test1");
        $(".navbar-brand").removeClass("test");
        $(".navbar-brand").addClass("text-white");

    } else {
      $(".navbar").removeClass("test1");
      $(".navbar-brand").removeClass("text-white");
      $(".navbar-brand").addClass("test");
    }
}); 
  
});
}
    render() {
        return (
<div>
    <nav class="navbar navbar-expand-lg navbar-light fixed-top ">
   
    <Navbar expand="lg" bg="" variant='light'>
    <a class="navbar-brand test" href="#">Cincinnati Lifestyle</a>
                    <Navbar.Toggle aria-controls="basic-navbar-nav "/>
                    <Navbar.Collapse id=" mr-auto basic-navbar-nav ">
                        <Nav className="ml-auto ">                                                   
                        <Nav.Item >
                            <Nav.Link>
                            <Link className="text-white" to="/">Home</Link>
                            </Nav.Link>
                        </Nav.Item >
                        <NavDropdown title={ <span className="text-white">Attractions</span>} id="basic-nav-dropdown" >
                                <NavDropdown.Item href="/viewattractions">View Attraction</NavDropdown.Item>
                                <NavDropdown.Item href="/addattractions">Add Attractions</NavDropdown.Item>
                            </NavDropdown>
                        <Nav.Item>
                            <Nav.Link>
                            <Link className="text-white" to="/about">About</Link>
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item>
                            <Nav.Link>
                            <Link className="text-white" to="/contact">Contact</Link>
                            </Nav.Link>
                        </Nav.Item>
                        </Nav>
                    </Navbar.Collapse>
                    </Navbar>
            </nav>
        </div>
        )
    }
}

CSS ....

.navbar {
 width: 100%; 
}

.test{
    color: transparent !important;
    }

.test1{
    background-color: rgb(79,106,126) !important;
}

解决方法

我认为您不需要jQuery来满足此要求。实际上，建议您避免在使用React时直接更改DOM。

您可能需要跟踪标题是否应具有颜色的状态，并且可以将导航栏切换为受控组件，以便您可以控制它在展开时是否也可以对菜单项进行着色>

state = {
    headerBreakPoint: 610,activeHeader: false,navbarExpanded: false
};

类似于您在jQuery上所做的事情，您可以在组件安装时添加事件侦听器。

componentDidMount() {
  window.addEventListener("scroll",() => {
    const scrollY = window.scrollY;

    if (scrollY >= this.state.headerBreakPoint) {
      this.setState({
        activeHeader: true
      });
    } else if (
      scrollY < this.state.headerBreakPoint &&
      this.state.navbarExpanded === false
    ) {
      this.setState({
        activeHeader: false
      });
    }
  });
}

在Navbar onToggle道具上，您可以有一些逻辑来评估它是否应该着色

<Navbar
  expand="lg"
  bg=""
  variant="light"
  expanded={this.state.navbarExpanded}
  onToggle={(expanded) => {
    const scrollY = window.scrollY;

    const shouldHeaderBeActive = ((_) => {
      if (expanded === true) {
        return true;
      } else if (
        expanded === false &&
        scrollY < this.state.headerBreakPoint
      ) {
        return false;
      } else {
        return true;
      }
    })();

    this.setState({
      navbarExpanded: expanded,activeHeader: shouldHeaderBeActive
    });
  }}
></Navbar>

最后，在您的JSX className道具上有一些条件，这些条件将根据当前状态添加/删除类

<nav
  className={`navbar navbar-expand-lg navbar-light fixed-top ${this.state.activeHeader ? "test1" : ""}`}
>

<a
  className={`navbar-brand ${this.state.activeHeader ? "text-white" : "test"}`}
  href="#1"
>
  Cincinnati Lifestyle
</a>