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

Question

Please apologize my lack of knowledge but I'm new to React and JavaScript.

I'm building a Website where I have a Sidebar and a Navbar on top of the page. The Sidebar is activated / deactivated via an hamburger menu which is located in the Navbar-component. It is activated via CSS-classes: <nav className={isActive? 'nav-menu active': 'nav-menu'}> <nav className={isActive? 'nav-menu active': 'nav-menu'}>

My Problem now is, that I dont know how to transfer the variables toggleButton and isActive from the Navbar.jsx where they are declared to the Sidebar.jsx where I need them to activate my Sidebar. Do I need to import the js files? Is it possible to export isActive and toggleButton seperatly from the JSX-Code?

Thanks for your help: :)

This is my Code:

Navbar-component

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;

Sidebar-component:

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

One possible approach is to move the state one level up.

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} />

 }

Alternatively, you can use the context API to store to hold the state and access it anywhere within the app. In your case, I think the first option is a better idea given it's simple nature.

Answer 2

This is where you'd lift state up, outside of those into a container of sorts.

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

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

Essentially you track that from higher up in the tree while providing the values/methods for changing to the children components.