javascript - react /减少。从其他组件访问状态

Question

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

两个组件在入口文件App.js中渲染。第一个组件是移动导航。那个应该打开/关闭取决于组件 2 中的状态，它是一个切换按钮。谁能帮帮我？

组件 1.(在这里我想从组件 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

组件 2

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

Answer 1

react 方式:

如果你想自己使用react(没有 redux)，你需要创建一个 shouldToggled 状态和一个在你的父组件中控制它的函数(App.js)。然后你需要将函数传递给你的汉堡包组件并将状态传递给另一个，在你的汉堡包组件中你需要使用函数来改变你的 App.js 组件中的状态并通过你的父状态将被更新并导致重新渲染。这称为提升状态技术，您可以在 React 文档中查看它以获取更多信息。

Redux 方式:

redux 方式有点复杂，很难。到那时，你有两种选择，基于你的组件的父/子关系的复杂性和你的 child 有多少层深(在你的情况下只有一层深)，与你需要在 redux store 来控制组件的切换状态，您还需要有一个 Action 创建器，以触发该状态更改。然后在你的汉堡包组件中，你需要调用那个 Action 创建者将 Action 发送到 reducer 以更改商店，一旦商店以不可变的方式更改，整个 redux 商店将更新并立即提供给你的整个应用程序，并且finally 会导致组件重新渲染。

最后:

确保仅在复杂情况下使用 redux 方式 b/c 你会发现它在那种情况下很有帮助，而不是在像你当前问题这样的简单情况下。我对你的建议可能是:针对你当前的问题坚持使用 React 提升状态技术，因为在你的情况下它需要的样板代码要少得多。