ReactJS 렌더링에서 데이터를 가져올 때까지 기다리는 동안 스피너로드 표시

Question

상태에서로드 된 플래그로 토글 된 2 가지보기 유형을 표시하는 ReactJS 구성 요소를 쓰려고합니다. 로더 회 전자에 대해 묻지 만,이 문제는 해당 플래그를 기반으로 2 개의 서로 다른 DOM 트리를 표시 할 때 더 복잡 할 수 있다고 생각합니다. 내가 할 수있는 한 내 코드를 더 명확하게하고 싶습니다. 나는 다른 문 안에 또 다른 포장 사업부를 추가해야

첫 번째 방법은 나에게 매우 직관적이다하지만 읽을 + : 내가 마음에 무엇을 가지고

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> 
    ); 
} 

두 번째 방법은로드 된 코드를 렌더링하기 전에 반환하는 것입니다. 이렇게 렌더링 함수 안에 로직을 유지하는 것이 좋습니다. + "content"클래스 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

내가 아는 한 일반적인 관행입니다. 그러나 렌더링 함수에 논리가 하나만 있거나 전혀없는 방식으로 구성 요소를 리팩터링해야합니다.

부모 구성 요소가로드 상태를 관찰하고 로더 구성 요소 또는 "로드 된"구성 요소를 렌더링합니다.

주 논리가보다 진보 된 경우 Flux 아키텍처와 구현 라이브러리 Redux를 살펴보아야합니다.