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

【问题标题】：How to import parameters from one React component to another如何将参数从一个 React 组件导入到另一个组件
【发布时间】：2021-07-03 19:49:03
【问题描述】：

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

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

我现在的问题是，我不知道如何将变量 toggleButton 和 isActive 从声明它们的 Navbar.jsx 转移到我需要它们激活侧边栏的 Sidebar.jsx。我需要导入js文件吗？是否可以从 JSX-Code 中单独导出 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;

【问题讨论】：

Worth a read 或者对于有更多时间来提炼答案的人。 Also worth a read

标签： javascript html reactjs web development-environment

【解决方案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 来存储以保存状态并在应用内的任何位置访问它。在你的情况下，我认为第一个选项是一个更好的主意，因为它很简单。

【讨论】：

【解决方案2】：

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

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

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

本质上，您从树的较高位置跟踪它，同时提供更改为子组件的值/方法。

【讨论】：