React中如何将函数传递给组件实现Navbar暗亮模式切换

修改方案 #

你只需要按以下两步调整代码，即可将切换主题的方法传递到Navbar组件中使用：

1. 调整App.tsx，传递props给Navbar组件 #

在渲染Navbar的位置，将toggleTheme方法和当前theme状态作为参数传递，调整后代码如下：

import React, { useState } from "react";
import logo from "./assets/logo.png";
import "./App.css";
import Navbar from "./components/Navbar/Navbar";
import "bootstrap/dist/css/bootstrap.min.css";
import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "./theme";
import { GlobalStyles } from "./global";

function App() {
  
  const [theme, setTheme] = useState("light");

  function toggleTheme() {
    if (theme === "light") {
      setTheme("dark");
    } else {
      setTheme("light");
    }
  };

  return (
    <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
      <GlobalStyles />
      <div className="App">
        {/* 传递toggleTheme和当前theme给Navbar */}
        <Navbar toggleTheme={toggleTheme} currentTheme={theme}/>
        {/* 原app.tsx里的测试切换按钮可以删除 */}
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1>linusromland.com</h1>
        </div>
      </div>
    </ThemeProvider>
  );
}

export default App;

2. 调整Navbar.tsx，接收并使用传入的props #

因为你使用的是类组件，直接通过this.props访问父组件传入的参数，给切换按钮绑定点击事件，同时可以根据当前主题动态切换展示的图标。如果是TypeScript环境，建议先定义Props类型避免类型报错，调整后代码如下：

import React from "react";
import BSNavbar from "react-bootstrap/Navbar";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Button from "react-bootstrap/Button";
import "./Navbar.css";
import "bootstrap/dist/css/bootstrap.min.css";
import lightmode from "../../assets/lightmode.svg";
import darkmode from "../../assets/darkmode.svg";

// TypeScript下定义props类型，纯js环境可以删掉这部分
interface NavbarProps {
  toggleTheme: () => void;
  currentTheme: 'light' | 'dark';
}

// 类组件继承时传入props类型，纯js环境直接写React.Component即可
class Navbar extends React.Component<NavbarProps> {

  render() {
    return (
      <div className="Navbar" data-testid="Navbar">
        <BSNavbar bg="light" expand="lg">
          <Container className="col-5">
            <BSNavbar.Brand href="/">Linus Romland</BSNavbar.Brand>
            <BSNavbar.Toggle />
            <BSNavbar.Collapse className="justify-content-end">
              <Nav>
                <Nav.Link href="/" className="text-dark">
                  Home
                </Nav.Link>
                <Nav.Link
                  href="https://github.com/linusromland/"
                  className="text-dark"
                >
                  GitHub
                </Nav.Link>
                <Nav.Link href="/about" className="text-dark">
                  About
                </Nav.Link>
                {/* 绑定toggleTheme事件，动态切换图标 */}
                <Button variant="light" onClick={this.props.toggleTheme}>
                  <img 
                    src={this.props.currentTheme === 'light' ? lightmode : darkmode} 
                    alt="Darkmode/Lightmode change" 
                  />
                </Button>
              </Nav>
            </BSNavbar.Collapse>
          </Container>
        </BSNavbar>
      </div>
    );
  }
}

export default Navbar;

调整完成后，点击Navbar里的主题按钮即可正常切换亮/暗模式，同时图标会跟随当前主题自动切换。

内容的提问来源于stack exchange，提问作者Linus Romland