代码之家 › 专栏 › 技术社区 › Ameer Hamza

本地响应:如何从子组件更改父组件的状态并重新呈现父组件?

react-native

Ameer Hamza · 技术社区 · 6 年前

我有“rootcomponent”,它有一个状态 伊洛格丁 和负载登录和主页作为:

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

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

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

在登录我想换衣服 伊洛格丁 按下“登录”按钮并重新发送到时的状态主页屏幕。不使用Redux。

2 回复 | 直到 6 年前

Aseem Upadhyay 6 年前

您的父组件应该将属性传递给登录组件和主组件。您需要的是父组件中更新父组件状态的方法。该方法将作为prop-to-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 .一旦状态被更新,新的值将被传递给登录和主组件,它们将把它作为更新的属性来处理,因此将重新呈现。

Robert Mennell 6 年前

您需要将一个函数传递给登录组件,一旦登录,将调用该组件并更新父组件的状态:

...
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() 在登录过程完成时

虽然我不确定你是如何到达自旋体状态的…

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前