反应/终极版。从其他组件访问状态 [英] React/Redux. Access state from other component

问题描述

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

这两个组件在App.js中呈现，即条目文件。第一个组件是移动导航。应根据组件2中的状态打开/关闭那个，这是一个切换按钮。任何人都可以帮助我吗？

组件1.（在这里我想从组件2访问'toggled'状态）

  import * as style from'./MobileNavigation.style'
 import React，{Component} from'alse'
 import Button from'。 ./../components/Button'
 
类MobileNavigation扩展组件{
 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> 
）
} 
} 
 
 expo rt默认MobileNavigation 
  

组件2

 导入React，来自'react'的{Component} 
导入样式来自'styled-components'
 import *作为样式来自'./Hamburger.style'
 
 interface Props {
 width：string 
 height：string 
 fill：string 
 toggled？：boolean 
} 
 
 interface状态{
切换？：boolean 
} 
 
 const Svg = styled.svg` 
 width：$ {（props：Props）=> props.width}; 
身高：$ {（道具：道具）=> props.height}; 
` 
 
 class汉堡扩展组件< Props，State> {
 static defaultProps = {
 width：'100％'，
 height：'100％'，
 fill：'＃172b41'，
 toggled：true 
} 
 
构造函数（道具：任何）{
 super（道具）
 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>已关闭< / div> 
）:( 
< div> open< / div> 
）} 
< /style.Wrapper> 
）
} 
} 
 
出口默认汉堡
  

解决方案

React Way：

如果你想这样做自己做出反应（没有redux）你需要创建一个 shouldToggled 的状态和一个连续的函数在您的父组件中滚动它（ App.js ）。然后你需要将函数传递给你的汉堡包组件并将状态传递给另一个汉堡包组件，你需要使用函数来改变你的 App.js 组件，并且您的父状态将被更新，这将导致Rerender。这称为提升状态提升技术，您可以在反应文档中查看更多信息。

Redux方式：

<还原方式有点复杂难度。通过这种方式，您可以根据组件的父/子关系的复杂程度以及您的孩子深入多少级别（在您的情况下只有一级深度）有两个选择，就像您需要在 redux store 来控制组件的切换状态，您还需要有一个动作创建器，以便触发该状态更改。然后在你的汉堡包组件中你需要调用该动作创建者将动作发送到reducer以便更改商店，一旦以不可变的方式更改商店，整个redux商店将更新并立即提供给整个应用程序，以及最后会导致你的组件重新出现。

最后：

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

Im trying to access a components state from another component with not much of a success. So far my code looks like this:

The two components are rendered in App.js, the entry file. First components is a mobile navigation. That one should be open/closed depending on the state in component 2 wich is a toggle-button. Can anyone help me out?

Component 1.(In here i want to access the state of 'toggled' from component 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

Component 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

解决方案

React Way:

if you want to do this in react it self (without redux) you need to create a state of shouldToggled and a function to control it in your parent component (App.js). then you need to pass the function to your hamburger component and pass the state in to other one and in your hamburger component you need to use function to change the state in your App.js component and by that your parent state would be updated an would cause a Rerender. this is called lifting state up technique and you can see it in react docs for more info.

Redux way:

redux way is a little bit complex tough. by that , you have two choices based on complexity of your component's parent/child relationship and how many levels your child is deep (which in your case is just one level deep), same as react way you need to have an state on redux store to control the toggled state of your components and you need to have an action creator too , in order to trigger that state change. then in your hamburger component you need to call that action creator to send the action to reducer in order to change the store, once the store is changed in an immutable way, the whole redux store would updated and immediately provided to your whole application, and finally would cause a rerender of your component.

finally:

make sure to use redux way only in complex situation b/c you would find it helpfull in those kind of situation rather that in simple cases like your current problem. and my advice for you could be: stick to the react lifting state up technique for your current problem, b/c it needs so much less boiler plate code in your case.

这篇关于反应/终极版。从其他组件访问状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！