React Nativeで条件付きレンダリングを使用する最良の方法

Question

React Nativeアプリケーションで作業しています。このアプリでは、ユーザーがサインインすると、redux-sagaを使用してデータを取得するためのAPI呼び出しがサーバーに行われます。 reduxストアでは、私はブール変数 "fetchingData"を維持しています。 API呼び出しが開始されると 'true'に設定され、データがフェッチされるか、何らかのエラーが発生すると 'false'に設定されます。今、私はデータがフェッチされているときにスピナーを表示したい、そしてデータがフェッチされるときにFlatListを表示したい。私はreturn文をif-else条件にラップすることでこれを行うことができることを知っています。私はこれを行うためのより良い方法が必要であると思います。 誰かがこれを手伝ってくれたら、React Nativeでこの条件付きレンダリングを実現する良い方法を教えてください。前もって感謝します。

Answer 1

私はそうは思わない。 render()メソッドが呼び出されると、適切なコンポーネントが状態に基づいて返される必要があります。

render() { 
    const isLoading = this.state.isLoading 
    return isLoading ? 
     <Spinner /> //return a spinner 
     : 
     <FlatList /> return a list with data 
} 

Answer 2

これは、あなたがどこにでも使用パターンである場合は、抽象パターンうちに、いくつかの方法があります。

ジェネリック <Loading />コンポーネントの作成

1. ：

   class Loading extends React.Component { 
       static defaultProps = { 
       waitingElement: <Spinner />, 
       renderedElement: null 
       }; 
   
       render() { 
       return this.props.loading ? this.props.waitingElement : this.props.renderedElement; 
       } 
   } 
   
   // In some other component's `render`:   
   <Loading renderedElement={<component with=props />}, loading={this.state.isWaiting} /> 
   

2. higher-を使用するには、コンポーネントをラップする順序コンポーネント：

   function withLoading(Component, spinner = <Spinner />) { 
       return class extends Component { 
       render() { 
        if (this.props.loading) return spinner; 
        return super.render(); 
       } 
       }; 
   } 
   
   // Some other file completely 
   export default withLoading(class MyComponent { 
       render() { 
       return "Happy path only!"; 
       } 
   });