如何更改每条路线的页面背景颜色

2019-11-07 08:00:00 · 飞浪

使用 JS 中的 React 和 CSS，您可以为应用程序的每个路由显示不同的背景颜色。

介绍

在本简短指南中，我将向您展示如何为每条路由显示不同的背景颜色。根据特定用例，您可能希望更改应用程序每条路由的背景颜色。在本指南中，我们将学习如何使用现代方法在 React 世界中实现这一点。这还将增强您对 JS 中 CSS 的理解。

以下是我们将在本示例中使用的页面组件。

      function Index() {
  return (
    <>
      <h2>Home</h2>
      <p>This is the Home Page</p>
    </>
  );
}

function About() {
  return (
    <>
      <h2>About</h2>
      <p>This is the About Page</p>
    </>
  );
}

function Users() {
  return (
    <>
      <h2>Users</h2>
      <p>This is the Users Page</p>
    </>
  );
}
    

将路由器添加到我们的项目

我们需要为此示例安装 react-router-dom，因此在命令行实用程序中运行以下命令。

      npm install --save react-router-dom

安装后，我们需要从react-router-dom导入。

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

构建根组件

在主组件中，color 属性会根据当前路由变化，颜色的映射如下：

主页 -> #282c34
关于页面 -> #9c27b0
用户页面 -> #007bff

最后，<App />组件如下所示：

      class App extends Component {
  constructor(props) {
    super(props);
    this.state = { color: "#282c34" };
  }

  // ..

  render() {
    return (
      <div style={{ background: this.state.color }} id="main">
        <Router>
          <div>
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about/">About</Link>
                </li>
                <li>
                  <Link to="/users/">Users</Link>
                </li>
              </ul>
            </nav>

            <Route path="/" exact component={Index} />
            <Route path="/about/" component={About} />
            <Route path="/users/" component={Users} />
          </div>
        </Router>
      </div>
    );
  }
}
    

我们将<Router />组件包装在一个 div 中，它是在其 style prop 中具有 backgroundColor 键的主要元素。

我们使用<Route />组件声明每个路由器，使用<Link />组件创建每个路由的链接，并在path属性中指定 URL 键。我们还需要在component属性中指定路由的组件。

在<Link />组件的点击处理函数中，我们改变组件的颜色状态。

      <Link to="/" onClick={() => this.changeColor("#282c34")}>
  Home
</Link>
    

      changeColor = color => {
  this.setState({ color });
};
    

完整代码

本节包含完整的源代码供您参考。

index.js

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

import "./styles.css";

function Index() {
  return (
    <>
      <h2>Home</h2>
      <p>This is the Home Page</p>
    </>
  );
}

function About() {
  return (
    <>
      <h2>About</h2>
      <p>This is the About Page</p>
    </>
  );
}

function Users() {
  return (
    <>
      <h2>Users</h2>
      <p>This is the Users Page</p>
    </>
  );
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { color: "#282c34" };
  }

  changeColor = color => {
    this.setState({ color });
  };

  render() {
    return (
      <div style={{ background: this.state.color }} id="main">
        <Router>
          <div>
            <nav>
              <ul>
                <li>
                  <Link to="/" onClick={() => this.changeColor("#282c34")}>
                    Home
                  </Link>
                </li>
                <li>
                  <Link
                    to="/about/"
                    onClick={() => this.changeColor("#9c27b0")}
                  >
                    About
                  </Link>
                </li>
                <li>
                  <Link
                    to="/users/"
                    onClick={() => this.changeColor("#007bff")}
                  >
                    Users
                  </Link>
                </li>
              </ul>
            </nav>

            <Route path="/" exact component={Index} />
            <Route path="/about/" component={About} />
            <Route path="/users/" component={Users} />
          </div>
        </Router>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
    

样式.css

      body {
  margin: 0;
  font-family: sans-serif;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

#main {
  height: 100vh;
  padding: 0px 24px;
}

nav ul {
  list-style: none;
  padding: 0px;
}

nav ul li {
  display: inline-block;
  margin: 0px 10px;
}

nav ul li:first-child {
  margin-left: 0px;
}

nav ul li a {
  color: #fff;
}

nav {
  display: flex;
}

h2,
p {
  color: #fff;
}
    

奖励：将类组件重构为函数组件

以前，如果我们想为组件添加状态，我们必须将函数式组件转换为扩展React.Component类的类组件。但是，通过引入钩子，我们可以将状态添加到函数式组件本身。

我们可以使用新的useState()方法向组件添加状态。它接受一个参数，即状态的初始值。它返回一个包含两个元素的数组：状态本身和更新该状态的函数。

因此重构之后，我们的组件将如下所示：

      function App() {
  const [color, changeColor] = useState("#282c34");
  return (
    <div style={{ background: color }} id="main">
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/" onClick={() => changeColor("#282c34")}>
                  Home
                </Link>
              </li>
              <li>
                <Link to="/about/" onClick={() => changeColor("#9c27b0")}>
                  About
                </Link>
              </li>
              <li>
                <Link to="/users/" onClick={() => changeColor("#007bff")}>
                  Users
                </Link>
              </li>
            </ul>
          </nav>

          <Route path="/" exact component={Index} />
          <Route path="/about/" component={About} />
          <Route path="/users/" component={Users} />
        </div>
      </Router>
    </div>
  );
}
    

我们使用数组解构从useState()中检索元素，正如 React 文档中所建议的那样。在onClick处理程序中，我们使用changeColor()函数并将新颜色传递给它。

结论

在本指南中，我们学习了如何通过将颜色存储在状态中并使用 React hooks 通过onClick处理程序对其进行操作来更改路线的背景颜色。希望您在阅读本指南后对 React hooks 有了很好的了解。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何更改每条路线的页面背景颜色

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

function Index() { return ( <> <h2>Home</h2> <p>This is the Home Page</p> </> ); } function About() { return ( <> <h2>About</h2> <p>This is the About Page</p> </> ); } function Users() { return ( <> <h2>Users</h2> <p>This is the Users Page</p> </> ); }

class App extends Component { constructor(props) { super(props); this.state = { color: "#282c34" }; } // .. render() { return ( <div style={{ background: this.state.color }} id="main"> <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about/">About</Link> </li> <li> <Link to="/users/">Users</Link> </li> </ul> </nav> <Route path="/" exact component={Index} /> <Route path="/about/" component={About} /> <Route path="/users/" component={Users} /> </div> </Router> </div> ); } }

import React, { Component } from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import "./styles.css"; function Index() { return ( <> <h2>Home</h2> <p>This is the Home Page</p> </> ); } function About() { return ( <> <h2>About</h2> <p>This is the About Page</p> </> ); } function Users() { return ( <> <h2>Users</h2> <p>This is the Users Page</p> </> ); } class App extends Component { constructor(props) { super(props); this.state = { color: "#282c34" }; } changeColor = color => { this.setState({ color }); }; render() { return ( <div style={{ background: this.state.color }} id="main"> <Router> <div> <nav> <ul> <li> <Link to="/" onClick={() => this.changeColor("#282c34")}> Home </Link> </li> <li> <Link to="/about/" onClick={() => this.changeColor("#9c27b0")} > About </Link> </li> <li> <Link to="/users/" onClick={() => this.changeColor("#007bff")} > Users </Link> </li> </ul> </nav> <Route path="/" exact component={Index} /> <Route path="/about/" component={About} /> <Route path="/users/" component={Users} /> </div> </Router> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));

body { margin: 0; font-family: sans-serif; } .App { font-family: sans-serif; text-align: center; } #main { height: 100vh; padding: 0px 24px; } nav ul { list-style: none; padding: 0px; } nav ul li { display: inline-block; margin: 0px 10px; } nav ul li:first-child { margin-left: 0px; } nav ul li a { color: #fff; } nav { display: flex; } h2, p { color: #fff; }

function App() { const [color, changeColor] = useState("#282c34"); return ( <div style={{ background: color }} id="main"> <Router> <div> <nav> <ul> <li> <Link to="/" onClick={() => changeColor("#282c34")}> Home </Link> </li> <li> <Link to="/about/" onClick={() => changeColor("#9c27b0")}> About </Link> </li> <li> <Link to="/users/" onClick={() => changeColor("#007bff")}> Users </Link> </li> </ul> </nav> <Route path="/" exact component={Index} /> <Route path="/about/" component={About} /> <Route path="/users/" component={Users} /> </div> </Router> </div> ); }