javascript - react : How to pass State value to another component and use it to render a component

Question

希望大家都一切顺利。

所以我在 LandingPage 组件内部的 Toolbar 组件内部有一个汉堡组件。我在汉堡组件内有一个状态 Hook 。我通过 Toolbar 使用 props 将状态值传递给 LandingPage 组件，并最终传递给 LandingPage 组件。然后，我在 LandingPage 组件的部分内有一个三元运算符，用于在为 true 时显示新组件(称为 NavigationMenu)，而在为 false 时不显示它。当我单击汉堡菜单时，我可以看到 bool 值正在通过以下方式传递给 LandingPage 常量。 console.logging，但三元运算符似乎不会动态更新 bool 值，也不会渲染导航页面。

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。

关于您的问题。您似乎在子组件内更新 Prop 。 Prop 从父级传递给子级。

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

在您正在执行的汉堡组件中

  const [burgerClick, setBurgerClick] = useState(true)

  props.burgerStatus[0] = burgerClick

在React中，父级中的数据更新是使用回调函数完成的。 See this

子级到父级 - 使用回调和状态

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

• 将该回调作为 prop 传递给子级(参见上文)。

• 在子级中使用 this.props.[callback] 调用回调(当然在 [callback] 处插入你自己的名字)，并传入数据作为参数。

  <

所以我会

  const [burgerClick, setBurgerClick] = useState(true)

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

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

在汉堡你可以有<button onClick = {props.setBurgerClick(true)}/>或<button onClick = {props.setBurgerClick(false)}/>单击按钮。由于这会更新父级中的 props，因此 props 应该正确传递。

也看看这个。 Props are read only