改变传递道具的状态答案

【问题标题】：Change state of passed prop改变传递道具的状态
【发布时间】：2020-09-14 14:28:03
【问题描述】：

当我有组件 Header 并且在 Header 内部将道具传递给 Navbar 时，我遇到了问题，但现在我需要从 Navbar 内部的 Header 更改道具的状态。在 Navbar 中，我需要以某种方式访问 menuState 并能够更改状态，我需要将其传递给 styled-components。

标题：

        <HeaderWrapper>
            <HeaderLogo>
                <Link to={"/"}>
                    <img src={''} height="45" alt=""/>
                </Link>
            </HeaderLogo>
                {isDesktop &&
                <HeaderRight>
                    <HeaderJoinUs to="/join-us">join us</HeaderJoinUs>
                    <ButtonExtend as={Button} color={"#FFF"}><Link to={"/contact-us"}>Let's talk</Link></ButtonExtend>
                    <SocialsExtend color={"#000"} as={Socials}/>
                    <HeaderBurgerContainer onClick={() => setMenuState(!menuState)}>
                        <HeaderBurger>
                            <HeaderBurgerInner menuState={menuState}/>
                        </HeaderBurger>
                    </HeaderBurgerContainer>
                </HeaderRight>
            <Navbar menuState={menuState}/>
        </HeaderWrapper>

导航栏：

   const [open, setOpen] = useState(false);

       <Nav>
            {navLinks.map(i =>{
                return (  
                    <NavItem key={i.path} onClick={() => setOpen(props.menuState)}>
                        <StyledNavLink exact={i.exact} to={i.path} activeClassName={'CdTfP'}>
                            <span data-link={i.content.en}></span>
                            {i.content.en}
                        </StyledNavLink>
                    </NavItem>
                )
            })}
        </Nav>

【问题讨论】：

只需将setMenuState 作为道具传递给Navbar 并调用它。
@BrianThompson 你能给我一些例子吗？谢谢！
没什么大不了的，就像你做menuState一样传递函数。无论您需要在哪里更新Header 状态，只需调用该函数即可。它是 React 中非常基本的模式。阅读here about Lifting State Up。

标签： javascript reactjs typescript styled-components

【解决方案1】：

您需要在header 组件中创建一个函数，该函数可以更改您的menuState，并将此函数与menuState 一起传递到Navbar 组件中，当您需要更改menuState 时，只需调用此@ 987654326@;比如这样：


function Header(){
  const [menuState, setMenuState] = useState();

  return (
  <HeaderWrapper>
    <HeaderLogo>
        <Link to={"/"}>
            <img src={''} height="45" alt=""/>
        </Link>
    </HeaderLogo>
        {isDesktop &&
        <HeaderRight>
            <HeaderJoinUs to="/join-us">join us</HeaderJoinUs>
            <ButtonExtend as={Button} color={"#FFF"}><Link to={"/contact-us"}>Let's talk</Link></ButtonExtend>
            <SocialsExtend color={"#000"} as={Socials}/>
            <HeaderBurgerContainer onClick={() => setMenuState(!menuState)}>
                <HeaderBurger>
                    <HeaderBurgerInner menuState={menuState}/>
                </HeaderBurger>
            </HeaderBurgerContainer>
        </HeaderRight>
    <Navbar setMenuState={setMenuState} menuState={menuState}/>
  </HeaderWrapper>
  )
}

在您的Navbar 中，只需将您想要设置为menuState 的value 值传递给props.setMenuState 函数

【讨论】：

就像你说的那样添加了，但状态没有改变。我得到了这样的 onClick 事件： onClick={() => props.setMenuState(props.menuState)}
为什么要再次将menuState 设置为它的值？
我得到了打开导航栏的汉堡菜单，在这个导航栏中，当用户点击链接时，我需要更改相同的状态。
我知道您要做什么，但您再次将 menuState 值设置为自身，这不是新的 value
很高兴有帮助 ;)