选择项目时如何更改菜单的背景颜色？

Question

我仍然是 React JS 的初学者，我对示例菜单有疑问。我有一个菜单，我需要在用户单击菜单时更改背景，以便用户知道他在哪个页面上。我已经做了几次测试，但我仍然无法做到。这是我放在 codesandbox 中的代码：https ://codesandbox.io/s/patient-resonance-6pwjh?file=/src/index.js有人能帮我吗？

Answer 1

这是工作示例：

https://codesandbox.io/s/patient-cherry-tpf50

注意：您需要"react-router-dom": "5.2.0"在package.json文件中添加此依赖项。

反应代码：

import React from "react";

import { BrowserRouter as Router, NavLink } from "react-router-dom";

import "./styles.css";

export default function App() {

  return (

    <Router>

      <div className="App">

        <div className="topnav">

          <NavLink to="/home" activeClassName="active">

            Home

          </NavLink>

          <NavLink to="/news" activeClassName="active">

            News

          </NavLink>

          <NavLink to="/contact" activeClassName="active">

            Contact

          </NavLink>

          <NavLink to="/about" activeClassName="active">

            About

          </NavLink>

        </div>

      </div>

    </Router>

  );

}

款式：

.App {

  font-family: sans-serif;

  text-align: center;

}

.topnav {

  overflow: hidden;

  background-color: #333;

}

a {

  float: left;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

a.active {

  background-color: #1144ff;

  color: #ffffff;

}

a:hover {

  background-color: #ddd;

  color: black;

}

Answer 2

我使用样式化组件管理了类似的东西。它允许您根据道具设置组件样式。

我有一个包含食谱的页面，顶部有一个类别栏，其中包含用户可以过滤食谱的蛋白质列表。我创建了一个 activeCategory 状态，默认情况下将其设置为“全部”，但当用户单击它时，它会更改为选择的任何蛋白质。我只是将该状态作为道具传递给 categoryBar 组件，并在它是活动类别时更改所选蛋白质的背景颜色。

您可以在 CategoryBar.js 的第 12 行中明白我的意思。如果您想查看状态，Picker.js 是父组件。

https://github.com/Taouen/gobble/tree/master/src/components