反应方式：

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

反应方式：

如果您想通过自身反应来执行此操作（不执行redux），则需要在父组件（shouldToggled）中创建一个状态App.js和一个控制它的函数。那么您需要将该函数传递给您的汉堡包组件，并将状态传递给另一个组件，然后在您的汉堡包组件中使用函数来更改App.js组件中的状态，这样您的父状态就会被更新会导致渲染。这称为提升状态提升技术，您可以在react docs中查看它以获取更多信息。

Redux方式：

redux方式有点复杂。这样，您就可以根据组件的父/子关系的复杂性以及您的孩子有几个层次（在您的情况下仅为一个层次）进行选择，这有两种选择，与您需要在上具有状态的反应方式相同> redux store 来控制组件的切换状态，并且您还需要有一个动作创建者才能触发状态更改。然后在您的汉堡包组件中，您需要调用该动作创建者以将该动作发送给reducer以便更改商店，一旦商店以不变的方式更改，整个redux商店将被更新并立即提供给您的整个应用程序，并且最终将导致组件的重新渲染。

最终：

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

React / Redux。来自其他组件的访问状态

1 个答案:

反应方式：

Redux方式：

最终：