Question

希望大家都过得很好。

因此，我在LandingPage组件内的工具栏组件内有一个Hamburger组件。我在Hamburger组件内部有一个状态钩。我通过使用工具栏上的道具将状态值传递给LandingPage组件，最后传递给LandingPage组件。然后，我在LandingPage组件的各节中都有一个三元运算符，当它为true时显示一个新组件（称为NavigationMenu），而当它为false时不显示它。当我单击汉堡菜单时，可以看到布尔值通过传递给LandingPage常量。 console.logging，但是三元运算符似乎不能动态更新布尔值，也不呈现导航页。

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

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

LandingPage 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

Toolbar.jsx：

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


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

export default Toolbar

Hamburger.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

欢迎来到。

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

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

您正在汉堡组件中

  const [burgerClick, setBurgerClick] = useState(true)

  props.burgerStatus[0] = burgerClick

在反应中，使用回调函数来完成对父代数据的更新。 See this

子代父母-使用回叫和状态

在父级中定义一个回调，该回调将需要的数据作为参数。
将该回调作为道具传递给孩子（见上文）。
在子级中使用this.props。[callback]调用回调（在标有[callback]的地方插入您自己的名字），然后将数据作为参数传入。

所以我会

  const [burgerClick, setBurgerClick] = useState(true)

在父项（<LandingPage>中），并将其作为道具传递给汉堡包。

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

在“汉堡包”中，单击按钮可以使<button onClick = {props.setBurgerClick(true)}/>或<button onClick = {props.setBurgerClick(false)}/>。由于此操作会更新父项中的道具，因此道具应正确传递。

也来看看这个。 Props are read only

反应：如何将State值传递给另一个组件并使用它来呈现组件

1 个答案: