我有一个LoginTable组件，这个组件是和其他组件没有任何嵌套关系的

然后，我希望在另一组件中添加一个事件，能控制LoginTable的显示和隐藏

当isLogin 为false的时候，展示LoginTable 组件

action:

reducer:

简言之，如何在reducer 中控制LoginTable 组件的className。。。？

问题补充

我仿照一楼的答案自己尝试了一下，但是跑不起来

这个例子有两个组件，一个子组件一个父组件

这是子组件 component1.js 全部代码

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { LogIn, LogOut } from "../actions/action.js";

class Login extends Component {
    constructor (props, context) {
        super (props, context);
    }

    render () {
        if (this.props.loginState) {
            return (
                
                    登录框
                
            )
        } else {
            return null;
        }
    }
}

export default connect(
    (state) => {
        return {
            loginState: state.loginState
        }   
    },

    (dispatch) => {
        return {
            actions: bindActionCreators({
                LogIn,
                LogOut
            }, dispatch)
        }
    }
)(Login);

这是父组件 component2.js 全部代码

import React, { Component } from "react";
import { render } from "react-dom";
import { bindActionCreators } from "redux";
import { Provider } from "react-redux";
import Login from "../src/component1.js";
import { configureStore } from "../stores/store.js"

class App extends Component {
    constructor (props, context) {
        super (props, context);
        this.showLogin = this.showLogin.bind(this);
    }

    showLogin () {
        let {
            loginState,
            logIn,
            logOut
        } = this.props;

        if (loginState) {
            logOut();
        } else {
            logIn();
        }
    }

    render () {
        return (
            
                
                
            
        )
    }
}

let store = configureStore();

render(
    
        
    ,
    document.querySelector(".demo"),
    () => console.log(">>>>>> 渲染已经完成啦 <<<<<<")
)

报错的原因是

action

import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; class Login extends Component { constructor(props, context) { super(props, context); } render() { if (this.props.loginState) { return <登陆框 /> } return null; } } function mapStateToProps(state) { return { loginState: state.loginState, }; } // action 创建函数是我们想要通过 props 获取的 function mapDispatchToProps(dispatch) { return { actions: bindActionCreators({ logIn, logOut, }, dispatch), } export default connect( mapStateToProps, mapDispatchToProps )(LoginMain);

import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import Login from '../components/Login'; class App extends Component { constructor(props, context) { super(props, context); this.showLogin = this.showLogin.bind(this); } showLogin() { this.props.actions.logIn(); } render() { return ( <Login /> <p onClick={this.showLogin} ></p> ) } } function mapStateToProps(state) { return { // }; } // action 创建函数是我们想要通过 props 获取的 function mapDispatchToProps(dispatch) { return { actions: bindActionCreators({ logIn, logOut, }, dispatch), } export default App