1

我的问题是我想访问组件中的容器，但它似乎是未定义的。

未定义的警报图像

我正在使用 Unstated，您可以看到这是我在容器文件 (login-container.js) 中的代码：

import { Container } from 'unstated'
class LoginContainer extends Container {
    constructor(props){
        super(props)
        this.state = {
            stepNumber: 0,
        }
    }
}
export default new LoginContainer()

这是 app.js：

import React, { Component } from 'react'
import {  createStackNavigator, createSwitchNavigator } from 'react-navigation'
import { Provider } from 'unstated'
import LoginContainer from './containers/login-container'
import Home from './screens/home'
import Splash from './screens/splash'
import Login from './screens/login'
import Intro from './screens/intro'

export default class App extends Component {
  render() {
    return (
      <Provider inject={[LoginContainer]}>          
          <AuthStack/>                            
      </Provider>
    )
  }
}

const SplashStack = createStackNavigator(...)

const AppStack = createStackNavigator(...)

const AuthStack = createStackNavigator(
  {
    Intro: { screen: Intro},
    Login: { screen: Login}
  },
  {
    headerMode: "none",
    initialRouteName: "Intro"
  }
)

const SwitchNavigator = createSwitchNavigator(...)

这将是 login.js：

import React, { Component } from 'react'
import { Text, View } from 'react-native'

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

  render() {
    // const { state: {stepNumber} } = this.props.loginContainer
    alert(this.props.LoginContainer)
    return (
      <View>
        <Text>  someText  </Text>
      </View>
    )
  }
}

我之前尝试使用订阅组件将容器注入到我的应用程序中，但我得到了同样的结果。

使用
- react-native 0.58.6
- react-navigation 2.13.0（由于 v3 中的一些错误）
- 未说明的 2.1.1

4

1 回答 1

0

Unstated 真正伟大的地方在于它的实现非常简单。只需将您的渲染组件包装在Unstated's<Subscribe to></Subscribe>标签中，您就可以开始使用了。每当您setState()在 Container 中时，它的所有Components内容都会使用它们可用的更新后的属性值Subscribe重新渲染。Containerstate

    import React, { Component } from 'react';
    import { Text, View } from 'react-native';
    import { Subscribe } from 'unstated';

    import LoginContainer from './containers/login-container';

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

      render() {
        return (
          <Subscribe to={[LoginContainer, AnotherContainer]}>
            {(container, another) => (
              <View>
                <Text>{container.state.stepNumber}</Text>
              </View>
            })
          </Subscribe>
        );
      }
    }

更新：或者以这种 HOC 方式进行。创建后：

WithUnstated.js

import React, { PureComponent } from "react";
import { Subscribe } from "unstated";

import DefaultStore from "../store/DefaultStore";

const withUnstated = (
  WrappedComponent,
  Stores = [DefaultStore],
  navigationOptions
) =>
  class extends PureComponent {
    static navigationOptions = navigationOptions;

    render() {
      return (
        <Subscribe to={Stores}>
          {(...stores) => {
            const allStores = stores.reduce(
              (acc, v) => ({ ...acc, [v.displayName]: { ...v } }),
              {}
            );
            return <WrappedComponent {...allStores} {...this.props} />;
          }}
        </Subscribe>
      );
    }
  };

export default withUnstated;

然后像这样包装你的组件：

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Subscribe } from 'unstated';

import LoginContainer from './containers/login-container';
import AnotherContainer from './containers/another-container';

class Login extends Component {
  constructor(props){
    super(props)
  }

  render() {
    const {LoginContainer: container} = this.props;
    return (
      <View>
        <Text>{container.state.stepNumber}</Text>
      </View>
    );
  }
}

export default withUnstated(Login, [LoginContainer, AnotherContainer])
于 2019-03-17T17:17:07.433 回答