ReactJSレンダリングでデータが取得されるのを待つ間にスピナーをロードする

Question

状態でロードされたフラグで切り替えられた2つのビュータイプを表示するReactJSコンポーネントを書き込もうとしています。私はローダースピナーについて尋ねましたが、この問題はそのフラグに基づいて2つの異なるDOMツリーを表示するためにはもっと複雑になると考えています。私はできる限り私のコードをもっと明確にしたいと思っています。私はelseステートメント内の別のラッピングのdivを追加する必要が

最初の方法は、私にとって非常に直感的ではなく読める+：：私が考えている何

は2つのそれを書くための方法である

render() { 
    return (
     <div> 
      {!this.state.loaded ? <Loader /> : (
       <div> 
        <Arrow direction="left" onClick={this.slideLeft}/> 
        <ul> 
         { 
          this.props.images.map((image, index) => { 
           return (
            <li key={index} styleName={index === this.state.active ? 'active' : ''}> 
             <ImageItem src={image} /> 
            </li> 
           ) 
          }) 
         } 
        </ul> 
        <Arrow direction="right" onClick={this.slideRight}/> 
       </div> 
      )} 
     </div> 
    ); 
} 

2番目の方法は、ロードされたコードをレンダリングする前に戻ることです。このように、レンダリング関数の内部にロジックを保持するのはよい方法ですか？ + "content" class divは複製されています：

render() { 
    if(!this.state.loaded){ 
     return <div className="content"><Loader /></div>; 
    } 

    return (
     <div className="content"> 
      <Arrow direction="left" onClick={this.slideLeft}/> 
      <ul> 
       { 
        this.props.images.map((image, index) => { 
         return (
          <li key={index} styleName={index === this.state.active ? 'active' : ''}> 
           <ImageItem src={image} /> 
          </li> 
         ) 
        }) 
       } 
      </ul> 
      <Arrow direction="right" onClick={this.slideRight}/> 
     </div> 
    ); 
} 

多分あなたに私のための他の提案がありますか？ありがとう。

Answer 1

私が知る限り、それは一般的な慣例です。ただし、レンダリング機能にはロジックが1つしか存在しないか、または存在しないように、コンポーネントをリファクタリングする必要があります。

親コンポーネントは読み込み状態を監視し、読み込みコンポーネントまたは読み込まれたコンポーネントをレンダリングします。

州のロジックがさらに進歩したら、Fluxアーキテクチャと実装ライブラリReduxを見てください。