Question

我正在尝试创建一个Navbar（组件），当用户登录SignIn组件时会稍微改变。所以，我的应用程序看起来像这样：

我在App中有一个状态，默认情况下已将身份验证设置为false。然后我有一个函数updatedAuthenticationEvent，它设置应用程序状态的值。

我有一个NavBar组件，我传递了Authenticated的值。我的想法是，如果经过身份验证，我会在导航栏上更改某些内容。那将是，不要显示＆＃34; Signin＆＃34;而是显示＆＃34;退出＆＃34;。因此，当我登录我的登录组件时，导航栏会发生变化。

然后我在我的应用程序中有一些路由，其中一个是我的Signin，我试图将我的函数传递给，作为回调。

export default class App extends React.Component {
    constructor(props)
    {
        super(props);
        this.state = {
            authenticated: false
        }
    }

    updatedAuthenticationEvent(isAthenticated)
    {
        console.log('Called!');
        this.setState({authenticated: isAthenticated});
    }


    render() {
        return (
            <div>
                <Router>
                    <div>
                    <Navbar authenticated={this.state.authenticated} />
                        <Route exact path='/' component={Home}  />
                        <Route path="/login" component={Login} changeState={this.updatedAuthenticationEvent} />                          
                    </div>
                </Router>
                <Footer />

            </div>
        )
    }
}

我的SignIn组件，实际上包含了我的登录内容。但就目前而言，我只是想让一些事情发挥作用。所以现在，我所做的就是当加载登录组件时，将Authenticated设置为true。

我的目标是将该道具传递给我的LoginBox，它具有所有逻辑，以及我的实际登录方法。但就目前而言，我希望这可以发挥作用。

export default class SignIn extends Component {
    constructor(props)
    {
        super(props);
    }

    componentWillMount()
    {
        this.props.changeState(true);

    }

    render() {
        return (
            <div className="row justify-content-md-center">
                <div className="col-lg-4">
                    <LoginBox changeState={this.props.changeState}  /> 
                </div>
            </div>   
        )
    }
}

我收到错误：

TypeError：this.props.changeState不是函数

为实现这一目标，我需要做些什么改变？登录框事件，应该影响导航栏。

Answer 1

好吧，我不会推荐这个，但是在这里，使用来自Router的render prop，这样你就可以直接传递changeState的回调

<Route path="/login" render={(props) => <Login {...props} changeState={this.updatedAuthenticationEvent}  />

然后我建议您在componentWillMount组件中componentDidMount更改Login

最后

使用箭头功能进行updatedAuthenticationEvent回调，例如

updatedAuthenticationEvent = (isAthenticated) => {
       ....
}

因此，在执行changeState

时，您不会遇到上下文问题

工作demo

将回调传递给孩子，以更新不同的孩子

1 个答案: