更改 NavLink 文本颜色 onClick答案

【问题标题】：Change NavLink text Color onClick更改 NavLink 文本颜色 onClick
【发布时间】：2020-08-25 10:12:00
【问题描述】：

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

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>

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

【问题讨论】：

标签： javascript html css reactjs navbar

【解决方案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;
 }

App.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;

【讨论】：

【解决方案2】：

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

a {
  color: black;
}

你可以试试here。

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

我建议您使用styled-components 为组件添加css。

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

【讨论】：

【解决方案5】：

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

【讨论】：

具有主要属性的简单颜色就足够了

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

您也可以使用 NavLink，它允许您添加 activeClassName 或 activeStyle reactrouter.com/web/api/NavLink

【解决方案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>

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案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>

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

【讨论】：