在 React Native 中更新渲染组件

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;