Question

我的applicationn中有一个ApplicationHeader组件，在App.js中称为

ApplicationHeader.js

export default class ApplicationHeader extends Component {
  constructor(props){
      super(props)
      this.state = {
        loggedUser: null,
      }
  }
  render() {
    return(
        <View style={AppStyle.header}>
          <View style={{flex:1}}>
            <Image source={require('../assets/images/logo.png')} style = { AppStyle.headerLogo}/>
          </View>
          <View style={{flex:0.1}}>
            <Image source={require('../assets/images/bag-topbar.png')} style = { AppStyle.headerBag}/>
          </View>
          <View style={{flex:0.15}}>
            <Image source={this.state.loggedUser !== null ? imgWishListLogged : imgWishList} style = { AppStyle.headerWishlist}/>
          </View>
        </View>
     );
   }
}

我的 App.js 呈现 ApplicationHeader

  render() {

     return (
       <SafeAreaView forceInset={{ bottom: 'never'}} style={styles.container}>
         {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
         <ApplicationHeader />
         <AppNavigator />
       </SafeAreaView>
     );

  }

现在，在我的 Homepage.js 中，我想将userLogged状态或prop发送到ApplicationHeader以在用户登录时更改图标。

class Homepage extends Component {
  render() {.....

Answer 1

将状态更改为props（或将props传递到构造函数中的状态）

<Image source={this.props.loggedUser !== null ? imgWishListLogged : imgWishList} style = { AppStyle.headerWishlist}/>

，然后将变量传递到ApplicationHeader的道具中。

<ApplicationHeader loggedUser={myVar} />

有关道具here的更多信息

Answer 2

通常的答案是，您“将数据向上传递”，因此您不会将其视为“从一个组件发送到另一个组件”，而是让一个组件在状态树中工作以将认证状态向上传递在组件树中。

在您的示例中，您不会将状态存储在较低级的对象中，而只是将较高级的组件中的状态作为prop传递。

Answer 3

经过一些尝试，我发现最好的方法是实现Redux。

然后，与Redux一起使用isLoggedUser属性，如下所示：

{!isLogged && ( <Image source={imgWishList} style = { AppStyle.headerWishlist}/>)}
{isLogged && ( <Image source={imgWishListLogged} style = { AppStyle.headerWishlist}/>)}

如何从另一个组件更改组件状态？

3 个答案: