react中通过redux来控制某一个组件的显示隐藏

本次实例通过修改div的display属性来实现显示隐藏

redux中代码:

 namespace: 'real',
   state: {
      showEcharts: 'block',
   },
   reducers: {
      save(state, action) {
         return {
            ...state,
            ...action.payload,
         }
      },
      showEcharts(state) {
         // console.log(state.showEcharts)
         let showEcharts;
         if (state.showEcharts === 'block') {
            showEcharts = 'none'
         } else {
            showEcharts = 'block'
         }
         return {
            showEcharts
         }
      },

  switch开关组件内的代码:

class RightSwitch extends Component {
   //曲线开关函数
   switch_2=()=>{
      const { dispatch } = this.props
      dispatch({
          type: 'real/showEcharts'
      })
   }
   

  echarts组件内代码:

 render() {
    const {showEcharts}=this.props.real
    return (
      <div id="echarts" style={{
        display: showEcharts
      }}>

  

posted @ 2021-11-05 11:17  阿衰( ̄ェ ̄;)  阅读(234)  评论(0)    收藏  举报