React：如何将状态值传递给另一个组件并使用它来呈现组件

Question

我希望每个人都做得很好。

所以我在 LandingPage 组件内部的 Toolbar 组件中有一个 Hamburger 组件。 我在汉堡组件内部有一个状态钩子。 我通过 Toolbar 使用 props 将状态值传递给 LandingPage 组件，并最终传递给 LandingPage 组件。 然后，我在 LandingPage 组件的部分内有一个三元运算符，用于在为真时显示一个新组件（称为 NavigationMenu），而在为假时不显示它。 当我单击汉堡菜单时，我可以看到布尔值通过传递到 LandingPage 常量。 console.logging，但三元运算符似乎不会动态更新布尔值，也不会呈现导航页面。

https://codesandbox.io/s/gifted-cache-kqfz9

以上是汉堡吧的工作代码。 您可以在控制台中看到传递给 LandingPage 的值正在更新，但三元运算符（在 LandingPage.jsx 的底部）没有加载导航页面。

登陆页面jsx：

import React from 'react'

import Toolbar from './Toolbar'
import NavigationMenu from './NavigationMenu'

function LandingPage(props) {

const burgerStatus = []

return (
  <div className='landing-container' >
    <Toolbar burgerStatus={burgerStatus} />

    {burgerStatus[0] ? <NavigationMenu /> : null}
  </div>
)
}

export default LandingPage

工具栏.jsx：

import React from 'react'
import Hamburger from './Hamburger'


function Toolbar(props) {
return (
    <div className='navbar' >
      <Hamburger burgerStatus={props.burgerStatus} />
    </div>
)}

export default Toolbar

汉堡包.jsx：

import React, { useRef, useEffect, useState } from 'react'
import './Hamburger.scss'


function Hamburger(props) {

  const [burgerClick, setBurgerClick] = useState(true)

  props.burgerStatus[0] = burgerClick


  function clickBurger() {
    setBurgerClick(prev => {
      return (!burgerClick)
    })  

    if (burgerClick === true) {
       props.burgerStatus[0] = true
       console.log(props.burgerStatus[0])
    } else {
      props.burgerStatus[0] = false
       console.log(props.burgerStatus[0])
    }
  }



  return (
    <div className="hamburger" onClick={clickBurger} >
        <div className="line1"></div>
        <div className="line2"></div>
        <div className="line3">
          <div className="blankLeft"></div>
          <div className="line3-right"></div>
        </div>
    </div>

  )
}


export default Hamburger

我已经包含了上面的代码。 感谢您的时间。

Answer 1

欢迎来到 SO。

关于你的问题。 您似乎正在更新子组件内的道具。 道具从父母传递给孩子。

<LandingPage burgerStatus> => <Toolbar burgerStatus={burgerStatus} /> => <Hamburger burgerStatus={props.burgerStatus} />

在你正在做的汉堡包组件中

  const [burgerClick, setBurgerClick] = useState(true)

  props.burgerStatus[0] = burgerClick

在反应中，更新父级中的数据是使用回调函数完成的。 看到这个

Child to Parent - 使用回调和状态

• 在我的父级中定义一个回调，它将我需要的数据作为参数。

• 将该回调作为道具传递给孩子（见上文）。

• 在子进程中使用 this.props.[callback] 调用回调（当然，在显示 [callback] 的地方插入你自己的名字），并将数据作为参数传入。

所以我会

  const [burgerClick, setBurgerClick] = useState(true)

在父级 ( <LandingPage> ) 中并将其作为道具传递给 Hamburger。

<Hamburger burgerStatus={props.burgerStatus} setBurgerStatus={props.setBurgerClick} />

在汉堡包中，您可以在<button onClick = {props.setBurgerClick(true)}/>使用<button onClick = {props.setBurgerClick(true)}/>或<button onClick = {props.setBurgerClick(false)}/> 。 由于这会更新父级中的道具，因此道具应该正确传递。

也看看这个。 道具是只读的