Question

我有一个状态为 isLoggedIn 的“ RootComponent”，并将登录和主页加载为：

..
..
switch (this.state.isLoggedIn) {
case 'true':
return (
<Home />
);

case 'false':
return (
<Login />
);

default:
return <Spinner size='large' color='red' />; 
}
...

在登录中，我想在按下登录按钮并更改为 Home 屏幕后更改 isLoggedIn 状态。不使用Redux。

Answer 1

您需要将一个函数传递给登录组件，登录后该函数将被调用并更新父级的状态：

...
switch (this.state.isLoggedIn) {
  case 'true':
    return (
      <Home />
    );

  case 'false':
    return (
    <Login updateLoginState={() => this.setState(state => ({ isLoggedIn: 'true'}))} />
    );

  default:
    return <Spinner size='large' color='red' />; 
}
...

在登录过程中，只需在登录过程完成时调用this.props.updateLoginState()

尽管我不确定您如何达到微调状态...

Answer 2

您的父组件应该将道具传递给Login和Home组件。您需要的是父组件中的方法，该方法可以更新父组件的状态。该方法将作为对Login组件的支持而传递。

您的根组件应该看起来像这样

handleClick() { this.setState({isLoggedIn: true}); }
render() { 
   return ( 
      {!this.state.isLoggedIn && <Login handleClick={this.handleClick}/>} 
      {this.state.isLoggedIn && <Home />
    );}

您的登录组件

render() { return (<Button
onPress={this.props.handleClick}
title="Press Me"
/>;}

流量- 当用户单击按钮时，将调用handleClick函数，该函数作为props向下传递。因此，将执行父组件中的方法，这将更新状态isLoggedIn。状态更新后，新值将向下传递到Login and Home组件，它们会将其视为更新的道具，因此将重新渲染

React Native：如何从子组件更改父组件的状态并重新渲染父组件？

2 个答案: