React에서 목록을 렌더링하는 방법 소개(코드 포함)

이 글은 React에서 (코드 포함) 목록을 렌더링하는 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

표시 페이지에는 일반적으로 여러 가지 표시 상태가 있습니다(목록 페이지를 예로 들겠습니다).

데이터가 비어 있습니다. 페이지가 비어 있습니다.
데이터를 가져오는 동안 오류가 발생했습니다. 오류 페이지
데이터가 정상입니다.
로드 상태
for 위의 세 가지 경우에, React는 목록을 렌더링할 때 해당 뷰를 정확하게 판단하고 렌더링해야 하는데, 이는 vue의 v-if, v-show 및 기타 프레임워크에서 제공하는 API와 달리, React의 조건부 렌더링은 다음과 같습니다. 예를 들어, React 문서에서 언급한 대로 if/else, && 및 3항 등이 있습니다.

물론 위의 방법은 일반적으로 사용되는 방법이지만 다양한 문제도 있습니다. , 조건 분기와 같은 것이 너무 많으면 코드가 점점 더 지저분해집니다. 실제로 이 세 가지 솔루션은 유사합니다. 렌더링 수명 주기에서 해당 판단을 내리세요. 그러나 삼항 연산자와 단락 연산자는

if/else

class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    const { status } = this.props
    if (status === 'loading') {
      return <div>
        加载状态
      </div>
    } 
    
    if (status === 'error') {
      return  <div>
        错误状态
      </div>
    }


    if (status === 'success') {
      return  <div>
        成功状态
      </div>
    }

    if (status === 'empty') {
      return  <div>
        空状态
      </div>
    }
  }
}

에서 사용할 수 있습니다. 이런 방식으로 작성하는 것이 더 명확하다고 볼 수 있지만, 점점 더 많은 판단 분기가 추가되면 코드가 매우 중복될 수밖에 없으며 재사용성도 걱정됩니다.

Render(IF) 구성 요소

여기서의 렌더링은 물론입니다. life가 아닌 Render에서는 vue

function Render ({ if: cond, children }) {
    return cond ? children : null
}

에서 v-if에 대응할 수 있습니다

위는 간단한 Render 컴포넌트로 사용하면 이렇습니다

class List extends Component {
    static propTypes = {
        status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
    }
    
  render () {
    const { status }  = this.props
    return (
      <div>
        <Render if={status === &#39;loading&#39;} >
          加载状态
        </Render>

        <Render if={status === &#39;error&#39;} >
          错误状态
        </Render>

        <Render if={status === &#39;success&#39;} >
          成功状态
        </Render>

        <Render if={status === &#39;empty&#39;} >
          空状态
        </Render>
      </div>
    )
    }
}

렌더링에서 if/else를 많이 사용하는 것과 비교하면, 위의 작성 방법은 의심할 여지 없이 더 명확합니다. 모든 목록 비즈니스 구성 요소가 통합되고 상태가 일관되게 유지되면 더 높은 수준의 추상화를 수행하고 다른 상태를 고차 함수로 추상화할 수 있습니다. 성공 상태를 확인하려면 올바르게 렌더링하기만 하면 됩니다

함수를 즉시 실행하세요

jsx에 변수를 쓰는 것도 가능하고, 함수를 즉시 실행하는 것도 가능합니다

class List extends Component {
  static propTypes = {
      status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    const { status }  = this.props
    return (
      <div>
        {(() => {
          switch (status) {
            case 'loading':
              return <div>加载状态</div>
            
            case 'error':
              return <div>错误状态</div>
            
            case 'success':
              return <div>成功状态</div>
            
            case 'empty':
              return <div>空状态</div>
          }
        })()}
      </div>
    )
  }
}

즉각 함수의 재사용은 당연히 현실적이지 않습니다 , 즉각적 기능에 적용 가능한 시나리오는 상대적으로 복잡하지만 재사용할 수 없는 구성 요소

고차 구성 요소

고차 구성 요소의 개념에 대해서는 자세히 설명하지 않겠습니다. 조건부 렌더링 논리를 상위에 넣습니다. -order 구성요소. 논리를 추상화하는 것 외에도 구성요소의 복잡성을 개선할 수도 있습니다.

const withList = WrappedComponent => {
  return class PP extends Component {
    render() {
      const { status } = this.props
      switch (status) {
        case 'loading':
          return <div>加载状态</div>
        
        case 'error':
          return <div>错误状态</div>
        
        case 'success':
          return <WrappedComponent {...this.props}/>
        
        case 'empty':
          return <div>空状态</div>
      }
    }
  }
}

모든 목록의 props가 일관되게 유지된다면(즉, 모두 상태를 사용하여 status), 성공 상태로서 상태 작성에만 완전히 집중할 수 있습니다:

@withList
class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    return (
      <div>
        成功页面
      </div>
    )
  }
}

두 번째로 로딩, 오류, 비어 있음을 넣을 수 있습니다. 컴포넌트의 통합 상태 추출은 의심할 여지 없이 컴포넌트의 재사용률을 높이는 데 큰 역할을 할 것입니다.

위 내용은 React에서 목록을 렌더링하는 방법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!