Javascript 反应/重复。来自其他组件的访问状态

我试图从另一个组件访问组件状态，但没有成功。到目前为止，我的代码如下所示：

这两个组件在条目文件App.js中呈现。第一个组件是移动导航。该开关应根据组件2中的状态打开/关闭，该状态为切换按钮。有人能帮我吗

组件1。（在这里，我想从组件2访问“toggled”的状态）

import*作为样式从“./MobileNavigation.style”
从“React”导入React，{Component}
从“../../components/Button”导入按钮
类MobileNavigation扩展组件{
render（）{
返回(
家
关于
接触
)
}
}
导出默认移动激活

构成部分2

import * as style from './MobileNavigation.style'
import React, { Component } from 'react'
import Button from '../../components/Button'

class MobileNavigation extends Component {
render() {
return (
  <style.Background>
    <style.Menu>
      <style.MenuItem>
        <style.RouterLink to="home">home</style.RouterLink>
      </style.MenuItem>
      <style.MenuItem>
        <style.RouterLink to="about">about</style.RouterLink>
      </style.MenuItem>
      <style.MenuItem>
        <style.RouterLink to="contact">contact</style.RouterLink>
      </style.MenuItem>
    </style.Menu>
  </style.Background>
)
  }
}

export default MobileNavigation

import React, { Component } from 'react'
import styled from 'styled-components'
import * as style from './Hamburger.style'

interface Props {
  width: string
  height: string
  fill: string
  toggled?: boolean
}

interface State {
  toggled?: boolean
}

const Svg = styled.svg`
  width: ${(props: Props) => props.width};
  height: ${(props: Props) => props.height};
`

class Hamburger extends Component<Props, State> {
  static defaultProps = {
    width: '100%',
    height: '100%',
    fill: '#172b41',
    toggled: true
  }

  constructor(props: any) {
    super(props)
    this.state = {
      toggled: true
    }
  }

  onClick(toggled: boolean) {
    this.setState({
      toggled: !this.state.toggled,
    })
  }

  render() {
    return (
      <style.Wrapper onClick={this.onClick.bind(this, this.props.toggled)}>
    {this.state.toggled ? (
      <div>closed</div>
    ) : (
      <div>open</div>
    )}
  </style.Wrapper>
)
}
}

export default Hamburger

import React，{Component}来自“React”
从“样式化组件”导入样式化
从“./Hamburger.style”导入*作为样式
界面道具{
宽度：字符串
高度：字符串
填充：字符串
切换？：布尔值
}
界面状态{
切换？：布尔值
}
const Svg=styled.Svg`
宽度：${（props:props）=>props.width}；
高度：${（道具：道具）=>props.height}；
`
类汉堡扩展组件{
静态defaultProps={
宽度：“100%”，
高度：“100%”，
填写：“#172b41”，
切换：正确
}
构造器（道具：任何）{
超级（道具）
此.state={
切换：正确
}
}
onClick（切换：布尔值）{
这是我的国家({
切换：！this.state.toggled，
})
}
render（）{
返回(
{this.state.toggled(
关闭
) : (
打开
)}
)
}
}
导出默认汉堡包

反应方式： 如果您想在react-it self（无redux）中执行此操作，则需要创建一个状态为

shouldtogled

，并在父组件中创建一个函数来控制它（

App.js

）。然后，您需要将函数传递给您的hamburger组件，并将状态传递给另一个，在hamburger组件中，您需要使用函数来更改

App.js

组件中的状态，这样您的父状态将被更新，并将导致重新提交。这称为提升状态提升技术，您可以在react文档中看到它以了解更多信息

Redux方式： redux的方法有点复杂。这样，根据组件的父/子关系的复杂性和子级的深度（在您的情况下，仅为一级），您有两种选择，这与react方式相同，您需要在redux store上有一个状态来控制组件的切换状态，您还需要有一个动作创建者，以触发该状态更改。然后，在汉堡包组件中，您需要调用该操作创建者将该操作发送到reducer以更改存储，一旦存储以不变的方式更改，整个redux存储将更新并立即提供给整个应用程序，最后将导致组件的重新提交

最后：

---

确保只在复杂情况下使用redux方法b/c在这种情况下，而不是在像您当前问题这样的简单情况下，您会发现它是有用的。我给您的建议是：对于您当前的问题，请坚持使用react-lifting-state-up技术，b/c在您的情况下，它需要的锅炉板代码要少得多。

如果这两个组件不在父子继承关系中，请使用redux更改redux store对象并在另一个组件中使用它。您能提供代码吗？或者redux或者contextI，正如主题所说，我得到了redux。我需要的是代码方面的帮助，因为我无法让它正常工作。您似乎没有使用redux，您能提供连接到存储、操作和还原程序的代码吗？