[英]How to pass states between function components in React
我的导航栏组件有 2 个子组件。 每个组件都有自己的 state。 状态在其组件内工作正常。 当 function onClick 都将被执行时,如何同时将两种状态从 false 更新为 true?
主要组件导航栏
import Hamburger from "./Hamburger";
import ListMenu from "./ListMenu";
const Navbar = () => {
return (
<div className="navContainer">
<nav className="navigation">
<div className="logo">LOGO</div>
<ListMenu />
<Hamburger />
</nav>
</div>
);
};
ListMenu 组件
import React, { useState } from "react";
const ListMenu = () => {
const [showMobileMenu, setShowMobileMenu] = useState(false);
const menu = ["HOME", "PRODUCTS", "ABOUT", "CONTACT"];
const onClick = () => {
if (window.innerWidth < 757) {
setShowMobileMenu(!showMobileMenu);
}
};
return (
<ul className={`navList ${showMobileMenu ? "open" : ""}`}>
{menu.map((item) => (
<li key={item} className="listItem" onClick={onClick}>
{item}
</li>
))}
</ul>
);
};
export default ListMenu;
汉堡组件
import React, { useState } from "react";
const Hamburger = () => {
const [navBarStatus, setNavBarStatus] = useState(false);
const onClick = () => {
if (window.innerWidth < 757) {
setNavBarStatus(!navBarStatus);
}
};
return (
<div className="nav_bar">
<div
onClick={onClick}
className={`hamburger ${navBarStatus ? "is-active" : ""}`}
>
<span className="line"></span>
<span className="line"></span>
<span className="line"></span>
</div>
</div>
);
};
export default Hamburger;
将所有状态从子组件移动到父组件,并在 props 中传递。
导航栏.js
import React, { useState } from "react";
import Hamburger from "./Hamburger";
import ListMenu from "./ListMenu";
const Navbar = () => {
const [showMobileMenu, setShowMobileMenu] = useState(false); // here
const [navBarStatus, setNavBarStatus] = useState(false); // here
return (
<div className="navContainer">
<nav className="navigation">
<div className="logo">LOGO</div>
<ListMenu
showMobileMenu={showMobileMenu} // props
setShowMobileMenu={setShowMobileMenu} // props
/>
<Hamburger
navBarStatus={navBarStatus} // props
setNavBarStatus={setNavBarStatus} // props
/>
</nav>
</div>
);
};
export default Navbar;
ListMenu.js
import React from "react";
// See props below showMobileMenu and setShowMobileMenu
const ListMenu = ({ showMobileMenu, setShowMobileMenu }) => {
const menu = ["HOME", "PRODUCTS", "ABOUT", "CONTACT"];
const onClick = () => {
if (window.innerWidth < 757) {
setShowMobileMenu(!showMobileMenu);
}
};
return (
<ul className={`navList ${showMobileMenu ? "open" : ""}`}>
{menu.map(item => (
<li key={item} className="listItem" onClick={onClick}>
{item}
</li>
))}
</ul>
);
};
export default ListMenu;
汉堡包.js
import React from "react";
// See props below navBarStatus and setNavBarStatus
const Hamburger = ({ navBarStatus, setNavBarStatus }) => {
const onClick = () => {
if (window.innerWidth < 757) {
setNavBarStatus(!navBarStatus);
}
};
return (
<div className="nav_bar">
<div
onClick={onClick}
className={`hamburger ${navBarStatus ? "is-active" : ""}`}
>
<span className="line" />
<span className="line" />
<span className="line" />
</div>
</div>
);
};
export default Hamburger;
演示: Stackblitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.