外部からの値が変更された場合にコンポーネントを再レンダリングする方法はありますか？

Question

だから、私はこのような単純なコード（クラス）があります。

export default class LoginAction { 
    isLoggedIn =() => { 
    return true 
    } 
} 

をそして、私はこのように私の他のクラスでそれを使用する：私は上の戻り値を変更したときに質問が、ある

export default class Main extends Component { 
    render =() => { 
    const loginAction = new LoginAction() 

    if (loginAction.isLoggedIn()) { 
     return (
     <View style={{ flex: 1 }}> 
      <Header headerText={'Post List'} /> 
      <PostList /> 
     </View> 
    ) 
    } 

    ....... (split) 
    } 
} 

メインコンポーネントが再レンダリングされない理由はisLoggedIn関数ですか？

それはネイティブであり、私はホットリロードを使用しています。

Answer 1

部品2つの状況でのみ再レンダリング：受信propsは、これらの状況のどれも起こらない、あなたのMainコンポーネントで

を変更した場合、そのstateは

を変更した場合

• 。それを修正する

  、あなたのコンポーネントにisLoggedInを渡すことができます。

  // index.js 
  
  const loginAction = new LoginAction() 
  let isLoggedIn = loginAction.isLoggedIn() 
  
  const setLoggedUser = user => { 
      loginAction.setLoggedUser(user) 
      isLoggedIn = true 
  } 
  
  ReactDOM.render(
      <div> 
      {!isLoggedIn && <Login setLoggedUser={setLoggedUser} />} 
      <Main isLoggedIn={isLoggedIn} /> 
      </div>, 
      document.getElementById('root') 
  ) 
  

  そして、あなたのコンポーネントのレンダリングにこの小道具を使用する：

  export default class Main extends Component { 
      render =() => { 
      if (this.props.isLoggedIn) { 
       return (
       <View style={{ flex: 1 }}> 
        <Header headerText={'Post List'} /> 
        <PostList /> 
       </View> 
      ) 
      } 
      ... 
      } 
  } 
  

  そうすることで、あなたのコンポーネントが時に再レンダリングされますisLoggedInが変更されます。