Question

我使用ReactNative和Flux，并没有按照如何在UserStore.addChangeListener(function(){});而不是Form处理另一个组件的方式。所以，我有一个登录表单，如果登录成功 - 我需要渲染NewsFeed。我怎么能这样做？

import NewsFeed from './NewsFeed';

var Form = React.createClass({
  componentWillMount: function() {
    UserStore.addChangeListener(function(){});
  },
  logIn: function() {
    fetch(
      // ...
    );
  },
  render: function() {
    return (
      <View>
        <TouchableHighlight onPress={this.logIn}>
          Log In
        </TouchableHighlight>
      </View>
    );
  }
});

export default Form;

UPD：

var Main = React.createClass({
  getInitialState: function() {
    return {
      loggedIn: false
    }
  },

  componentWillMount: function() {
    UserStore.addChangeListener(function(){
      this.setState({ loggedIn: true })
    });
  },

  shouldComponentUpdate: function() {
    return component = <NewsFeed />;
  },

  render: function() {
    var component = this.state.loggedIn ? <NewsFeed /> : <AuthForm />;

    return (
      <View style={styles.container}>
        { component }
      </View>
    );
  }

});

Answer 1

无法看到所有代码，类似这样的内容或接近此代码应该有效：

import NewsFeed from './NewsFeed';

var Form = React.createClass({

  getInitialState() {
    return {
      loggedIn: false
    }
  },

  componentWillMount() {
    UserStore.addChangeListener((){});
  },

  logIn() {
    fetch(
      // if login is successful 
      this.setState({ loggedIn: true })
    );
  },

  render() {

   let newsfeed, button, { loggedIn } = this.state

   if(loggedIn){
     newsfeed = <NewsFeed />
   }

   if(!loggedIn) {
    button = <TouchableHighlight onPress={this.logIn}>
               Log In
             </TouchableHighlight>
   }

    return (
      <View>
        { button }
        { newsfeed }
      </View>
    );
  }
});

export default Form;

更新ReactNative中的渲染组件

1 个答案: