javascript - 如何在 React 中将布尔变量从一个组件传递到另一个组件？

Question

我有一个导航栏组件，我在其中将状态设置为一个变量以显示或隐藏我的侧边栏。现在在另一个组件中，我想使用此变量为容器设置一个类（因为展开的侧边栏与我的内容重叠）。这个怎么做？

导航栏.js

import React, { useState } from 'react';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { Link } from 'react-router-dom';
import { SidebarData } from './NavbarData';
import './Navbar.css';
import { IconContext } from 'react-icons';

function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  console.log(sidebar)
  return (
      <IconContext.Provider value={{ color: '#fff' }}>
        <div className='navbar'>
          <Link to='#' className='menu-bars'>
            <FaIcons.FaBars onClick={showSidebar} />
          </Link>
        </div>
        <nav className={sidebar ? 'nav-menu active ' : 'nav-menu'}>
          <ul className='nav-menu-items' onClick={showSidebar}>
            <li className='navbar-toggle'>
              <Link to='#' className='menu-bars'>
                <AiIcons.AiOutlineClose />
              </Link>
            </li>
            {SidebarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
                    {item.icon}
                    <span>{item.title}</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    
  );
}
export default Navbar;

并且在另一个组件中有渲染：

 render() {
    <Navbar /> //I tried this but don't know what else should I do
    return (
      <div className="container">
        <div className="row">
          <div className="col-6 offset-1">
            <h1 className=''>Add new product</h1> //here the condition to set a class if sidebar is set to true
              <input type-"text" className="grey-text"/>
          </div>
        </div>
      </div>

标签： javascripthtmlreactjs

Answer 1

您可以在侧边栏的父组件中拥有侧边栏状态，这样您就可以将状态传递给您的导航栏和其他组件。

导航栏.js

import React, { useState } from 'react';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { Link } from 'react-router-dom';
import { SidebarData } from './NavbarData';
import './Navbar.css';
import { IconContext } from 'react-icons';

function Navbar({sidebar, setSidebar}) {
  const showSidebar = () => setSidebar(!sidebar);
  console.log(sidebar)
  return (
      <IconContext.Provider value={{ color: '#fff' }}>
        <div className='navbar'>
          <Link to='#' className='menu-bars'>
            <FaIcons.FaBars onClick={showSidebar} />
          </Link>
        </div>
        <nav className={sidebar ? 'nav-menu active ' : 'nav-menu'}>
          <ul className='nav-menu-items' onClick={showSidebar}>
            <li className='navbar-toggle'>
              <Link to='#' className='menu-bars'>
                <AiIcons.AiOutlineClose />
              </Link>
            </li>
            {SidebarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
                    {item.icon}
                    <span>{item.title}</span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    
  );
}
export default Navbar;

其他组件

function YourOtherComponent(){
 const [sidebar, setSidebar] = useState(false);//have your state here
 render() {
    <Navbar sidebar={sidebar} setSidebar={setSidebar}/>//pass it down to your Navbar component
    return (
      <div className="container">
        <div className="row">
          <div className="col-6 offset-1">
            <h1 className={`${sidebar && "SET YOUR CLASS HERE"}`}>Add new product</h1> {//you could add a class when sidebar is true}
              <input type-"text" className="grey-text"/>
          </div>
        </div>
      </div>
)}}

我希望这能够帮到你。