React：如何将 State 值传递给另一个组件并使用它来渲染组件

Question

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

所以我在 LandingPage 组件内部的 Toolbar 组件中有一个 Hamburger 组件。我在 Hamburger 组件中有一个状态钩子。我通过工具栏使用道具将状态值传递给 LandingPage 组件，并最终传递给 LandingPage 组件。 然后，我在 LandingPage 组件的部分内有一个三元运算符，以在它为 true 时显示一个新组件（称为 NavigationMenu），而在它为 false 时不显示它。 当我单击汉堡菜单时，我可以看到布尔值正在通过传递给 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

在响应中更新父项中的数据是使用回调函数完成的。 See this

Child to Parent - 使用回调和状态

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

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

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

  李>

所以我有

  const [burgerClick, setBurgerClick] = useState(true)

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

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

在 Hamburger 中，您可以通过单击按钮获得 <button onClick = {props.setBurgerClick(true)}/> 或 <button onClick = {props.setBurgerClick(false)}/>。由于这会更新父级中的道具，因此道具应该正确传递。

也看看这个。 Props are read only