在 React Native 中更新渲染组件

Posted 2023-02-22

【中文标题】在 React Native 中更新渲染组件

【英文标题】：Update rendered component in ReactNative

【发布时间】：2016-06-13 00:44:36

【问题描述】：

我使用 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>
    );
  

);

【参考方案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;

【讨论】：

嗨！谢谢你的回答，但是view状态改变时不要更新。

尝试将监听函数改成这样：componentWillMount() UserStore.addChangeListener(()=> this.setState( loggedIn: true ) ); ,

最后一条评论的原因是因为this 在常规 javascript 函数中使用时不再指向正确的上下文，它要么必须是使用粗箭头语法的函数，要么你可以调用 .bind(this)