在ReactNative中更新渲染的组件

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;