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)}/> 。 由於這會更新父級中的道具，因此道具應該正確傳遞。

也看看這個。 道具是只讀的