更改 NavLink 文本颜色 onClick

Question

如何在反应中更改导航栏中链接的文本颜色。

navLink1{
color: black;
}

   
<div className="left-navlinks">
                    <img className="logo" src={logo}/>
                    <Link to="/"></Link>
                    <Link to="/home"> <div className="navlink1">Home</div></Link>
                    <Link to="/about"> <div className="navlink2">About</div></Link>
                    
</div>

我试过用悬停属性来做，但它不起作用。 我想在单击并选择链接时将文本颜色设为蓝色

Answer 1

NavLink为我们提供了很好的解决方案，如下所示：

navItem.module.css：

.left_navlinks a {
   color:black;
   text-decoration: none;
 }
 
 .left_navlinks a:hover,
 .left_navlinks a:active,
 .left_navlinks a.active {
   color: blue;
 }

应用程序.js：

import React from "react";
import { NavLink } from "react-router-dom";
import classes from "./navItem.module.css";

class App extends React.Component {
   render() {
      return (
         <>
            <div className={classes.left_navlinks}>
               <img className="logo" src={logo} />
               <NavLink to="/"></NavLink>
               <NavLink to="/home" activeClassName={classes.active}>
                  Home
               </NavLink>
               <NavLink to="/about" activeClassName={classes.active}>
                  About
               </NavLink>
            </div>
         </>
      );
   }
}

export default App;

Answer 2

Link组件将呈现一个<a>元素。 所以要改变它的颜色，只需添加这个样式：

a {
  color: black;
}

你可以在这里试试。

Answer 3

而不是在 div 中添加。 您可以直接通过类来链接：

.navLink1{
color: black;
}

   
<div className="left-navlinks">
                    <img className="logo" src={logo}/>
                    <Link to="/"></Link>
                    <Link to="/home" className="navlink1"> Home</Link>
                    <Link to="/about" className="navlink2">About</Link>                    
</div>

这是其中的一个：

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import "./style.css";

function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/" className="navLink1">
              Home
            </Link>
          </li>
          <li>
            <Link to="/about" className="navlink2">About</Link>
          </li>
          <li>
            <Link to="/dashboard" className="navLink1">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}



export default function App() {
  return (
    <BasicExample/>
  );
}

演示： https : //stackblitz.com/edit/react-kcmdvt?file= src/ App.js

Answer 4

我建议您使用styled-components将 css 添加到组件中。

https://styled-components.com/docs/basics#styling-any-component

Answer 5

  <Link href="#" color="primary">
                <h2>Link</h2>
             </Link>

Answer 6

为了在单击时将链接保持为活动链接，您需要从父组件向此子组件传递一些道具，并使用三元运算符将 className 应用于与传递的道具匹配的活动链接。

例如：-

import React from 'react';
import { Link } from 'react-router-dom';

function navLink({activeLink}) {
    return (
        <div className="left-navlinks">
            <img className="logo" src={logo}/>
            <Link to="/"></Link>
            <Link to="/home"> <div className={activeLink === home ? `active-navlink` : `normal-navlink`}>Home</div></Link>
            <Link to="/about"> <div className={activeLink === about ? `active-navlink` : `normal-navlink`}>About</div></Link>                    
        </div>
    )
}

export default navLink

Answer 7

您应该能够完全删除 div 并在 Link 组件上拥有 className，也不需要为每个组件使用不同的 className。

要在链接是当前选择的选项时更改颜色，您可以使用“活动”选择器，或者如果您只想在单击它时更改颜色，则可以使用“已访问”。

这是一个带有“活动”选择器的示例。

navLink: {
  color: black;
}
navLink:active {
  color: blue;
}

我还假设您正在为该样式导入一个 css 文件？

<div className="left-navlinks">
                    <img className="logo" src={logo}/>
                    <Link to="/"></Link>
                    <Link to="/home" className="navLink">Home</Link>
                    <Link to="/about" className="navLink">About</Link>
                    
</div>

Answer 8

因此，如果您想通过单击文本来更改链接颜色，您应该使用 onClick 方法。使用状态来存储您想要的新颜色。代码如下。注意我使用了一个功能组件

    const [Color, setColor] = useState([""])
  const handleColor= e =>{
     setColor("blue")
      
  }
return (
    <div className="left-navlinks">

     <div className="navlink1" style={{color:Color}}  onClick={handleColor}>Home</div>
    

Answer 9

首先，我认为使用 react-router-dom 中的 NavLink 而不是 Link 更好。 现在 NavLink 返回一个标签。 所以你可以定位他们 .navlinks > a { color: black }。 但是，如果您想在活动时更改颜色，例如您可能需要 !important 以覆盖它。 希望它有效。

Answer 10

const location = useLocation();

    <div>
        <img className="logo" src={logo}/>
        <Link to="/"></Link>
        <Link to="/home" className={location.pathname === "/home" ? "navLink1": ""}> Home</Link>
        <Link to="/about" className={location.pathname === "/about" ? "navLink1":""}> About</Link>
    </div>

请试试这个。 这对我有用。