What is the most ideal ways to select multiple elements in React?-CodePudding

I have a functional component named Topbar that uses navbar from Boostrap. The component has three navbar items or links: Home, About, and contact. I want to select these three <Nav.Link> in my useEffects to change its color based on the current URL. For example, if I am currently on the about page, the "about" on the navigation bar will have different colors than the other two.

One idea I have is to give the three <Nav.Link> a className and use document.querySelector(). But I am not sure if it's a good way to do so. So ideally in React, what is the best way that needs the least code?

export default function Topbar() {
  useEffect(()=>{
    //select the <Nav.Link> elements here

  }, []);
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">
            <span>My Business</span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link key="home" href="/">Home</Nav.Link>
            <Nav.Link key="about" href="/about">About</Nav.Link>
            <Nav.Link key="contact" href="/contact">Contact</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

CodePudding user response：

If you just need to adjust the color based on certain conditions, you can just create a function that outputs the color then call it in the render.

const getColor = () => {
  if (window.location.host.includes("stackoverflow") {
     return 'red';
  }

  return 'blue';
}

export default function Topbar() {
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">
            <span>My Business</span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link key="home" href="/" style={{ color: getColor() }}>Home</Nav.Link>
            <Nav.Link key="about" href="/about" style={{ color: getColor() }}>About</Nav.Link>
            <Nav.Link key="contact" href="/contact" style={{ color: getColor() }}>Contact</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

CodePudding user response：

//Sorry here you go

import {useEffect, useRef} from 'react'

export default function Topbar() {
  const navLinkRef = useRef(null)

  useEffect(()=>{
    //select the <Nav.Link> elements here
    // --- >navLinkRef.current.
  }, []);
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">
            <span>My Business</span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link ref={navLinkRef} key="home" href="/">Home</Nav.Link>
            <Nav.Link key="about" href="/about">About</Nav.Link>
            <Nav.Link key="contact" href="/contact">Contact</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};