Реагировать / Redux.Состояние доступа из другого компонента

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

Способ реагирования:

, если вы хотите сделать это самостоятельно, без редуксов, вам нужно создать состояние shouldToggled и функцию для управления им в родительском компоненте (App.js).).затем вам нужно передать функцию вашему компоненту гамбургера и передать состояние другому компоненту, а в вашем компоненте гамбургера вам нужно использовать функцию, чтобы изменить состояние в вашем App.js компоненте, и таким образом ваше родительское состояние будет обновлено и будетвызвать повторное рендерингэто называется техникой поднятия состояния, и вы можете увидеть ее в реактивной документации для получения дополнительной информации.

Путь Redux:

Редукционный путь немного сложен.Таким образом, у вас есть два варианта, в зависимости от сложности отношений родитель / потомок вашего компонента и от того, сколько уровней у вашего ребенка (который в вашем случае составляет всего один уровень), так же, как вы реагируете, когда вам нужно иметь состояние на redux store для управления переключенным состоянием ваших компонентов, и вам также нужно иметь создателя действий, чтобы вызвать это изменение состояния.затем в вашем компоненте гамбургера вам нужно вызвать этого создателя действия, чтобы отправить действие редуктору, чтобы изменить хранилище, после того как хранилище будет изменено неизменным образом, все хранилище редуксов будет обновлено и немедленно предоставлено всему вашему приложению, иВ конечном итоге, вызовет повторный рендеринг вашего компонента.

Наконец:

убедитесь, что вы используете избыточный способ только в сложной ситуации, так как в такой ситуации вы найдете ее полезной, а не простойслучаи, как ваша текущая проблема.и мой совет для вас может быть следующим: придерживайтесь метода поднятия реактивного состояния для вашей текущей проблемы, потому что в вашем случае он требует гораздо меньше кода котельной пластины.