React Native : 조건이 결합 된 여러 개의 조건부 뷰를 렌더링하는 방법은 무엇입니까?

Question

내 구성 요소 중 하나에는 전체 화면보기 (로딩, 오류/재시도 및 기타 2 개)가있는 약 4 개의 다른 상태가 있습니다.

는 현재 기능을 렌더링의 나 다음과 같습니다

이

render() { 
    return (
     <View style={{flex: 1, flexDirection: 'column'}}> 
      {this.renderLoadingView()} 
      {this.renderEmptyView()} 
      {this.renderErrorView()} 
      {this.renderInterviewListView()} 
      {this.renderInterviewFeedbackRequestViews()} 
     </View> 
    ); 
} 

는하지만 다른 사람의 각 그들이 조건들을 충족하지 않는 경우, 널 (null) 렌더링 중이 같은 모양 또는 뷰의 경우 렌더링 모두 일치 함 :

특히 여러보기가 동일한 것 (예 : showLoading이 true인지 여부)에 의존하기 때문에보기가 지저분합니다. 이것을 단순화하거나 더 깨끗하게 할 수있는 방법이 있습니까?

Answer 1

렌더링 방법에서 조건을 사용하고 도우미 메서드에서 조건을 제거하십시오. 렌더링 방법은 다음과 같아야합니다.

이렇게하면 도우미 메서드가 더 깨끗해지고 나머지도 제거됩니다. 귀하의 질문을 보면서 나는 귀하의 견해들 사이에 공통적 인 코드를 결정할 수 없었습니다.

공통점이있는 경우 메소드에 매개 변수를 추가하여 코드를 최적화하고 도우미 메서드 수를 줄일 수 있습니다.