如何将参数从一个 React 组件导入到另一个

Question

请原谅我缺乏知识，但我是 React 的新手，JavaScript。

我正在构建一个网站，页面顶部有一个边栏和一个导航栏。侧边栏通过位于导航栏组件中的汉堡菜单激活/停用。它通过 CSS-类激活：<nav className={isActive ? 'nav-menu active' : 'nav-menu'}>

我现在的问题是，我不知道如何将变量 toggleButton 和 isActive 从声明它们的 Navbar.jsx 转移到我需要它们来激活我的边栏的 Sidebar.jsx。我需要导入js文件吗？是否可以从 JSX 代码中单独导出 isActive 和 toggleButton？

感谢您的帮助！ :)

这是我的代码：

导航栏组件

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Nav from "react-bootstrap/Nav";
import FormControl from "react-bootstrap/Form";
import Dropdown from "react-bootstrap/Dropdown";
import './Navbar.css';



    const NavbarTop = () => {
      const [isActive, setIsActive] = useState(false)
    
      const toggleButton = useCallback(
        () => setIsActive(prevState => !prevState),
        [],
      );
      return (
        <>
    
      <Navbar className="background-color" variant="light">
        <Navbar.Brand href="#home">
            <img
                src="https://pbs.twimg.com/profile_images/603568605796634624/Nq0nXZZA_400x400.jpg"
                width="30"
                height="30"
                className="d-inline-block align-top"
                alt="React Bootstrap logo"
            />
            </Navbar.Brand>
            <Dropdown>
                <Dropdown.Toggle Classname="color" rvariant="success" id="dropdown-basic">
                Kategorien
                </Dropdown.Toggle>
    
            <Dropdown.Menu>
                <Dropdown.Item href="#/action-1">Bücher</Dropdown.Item>
                <Dropdown.Item href="#/action-2">Veranstaltungen</Dropdown.Item>
                <Dropdown.Divider />
                <Dropdown.Item href="#/action-3">Etwas Posten</Dropdown.Item>
            </Dropdown.Menu>
            </Dropdown>
        <Form inline>
          <FormControl type="text" placeholder="Search" className="mr-sm-2" />
          <Button variant="outline-primary">Search</Button>
        </Form>
        <Link to='#' className='menu-bars'>
              <HamburgerSpring className="Hamburger"
                buttonColor="transparent"
                barColor="#007466"
                buttonWidth={35}
                {...{ isActive, toggleButton }}
                />
              </Link>
              </Animate>
      </Navbar>
    </>
      );
    };
    
    export default NavbarTop;

侧边栏组件：

import React, { useState, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { SidebarData } from './SidebarData';
import { IconContext } from 'react-icons';
import {Animate} from 'react-rebound';
import { HamburgerSpring } from 'react-animated-burgers';
import './Sidebar.css';




function Sidebar(isActive, toggleButton) {
  
 
  return (
          <>
    
      <IconContext.Provider value={{ color: 'white' }}>
          
        <nav className={isActive ? 'nav-menu active' : 'nav-menu'}>
          <div className='nav-menu-items'>
            <ul  onClick={toggleButton}>
              {SidebarData.map((item, index) => {
                return (
                  <li key={index} className={item.cName}>
                    <Link to={item.path}>
                      {item.icon}
                      <span>{item.title}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
            

          </div>
        </nav>
      
          
    </IconContext.Provider>
    </>
  );
}

export default Sidebar;

Answer 1

一种可能的方法是将状态向上移动一个级别。

const ParentComponent = () => {

   const [isActive, setIsActive] = useState(false)
    
   const toggleButton = useCallback(
     () => setIsActive(prevState => !prevState),
      [],
   );
    
   .....
   .....
   {/* You can use like this */}
   <SideBar isActive={isActive} toggleButton={toggleButton} />
    
   <NavBar isActive={isActive} toggleButton={toggleButton} />

 }

或者，您可以使用 context API 存储来保存状态并在应用程序内的任何位置访问它。对于你的情况，我认为第一个选项是一个更好的主意，因为它很简单。

Answer 2

这是您将状态提升到某种容器之外的地方。

function Container() {
    const [toggleIsActive, setToggleIsActive] = useState(false);

    return (
        <Navbar ... toggleIsActive={toggleIsActive} setToggleIsActive={setToggleIsActive} />
        <Sidebar ... toggleIsActive={toggleIsActive} setToggleIsActive={setToggleIsActive} />
    )
}

本质上，您在提供 values/methods 用于更改子组件的同时，从树的较高位置跟踪它。

如何将参数从一个 React 组件导入到另一个

How to import parameters from one React component to another

html

javascript

development-environment

web

reactjs