Reactでリストをレンダリングする方法の紹介（コード付き）

この記事では、React でリストをレンダリングする方法を紹介します (コード付き)。必要な方は参考にしていただければ幸いです。

表示ページには、通常、いくつかの表示状態があります (リスト ページを例に挙げます):

データは空です、空のページです
データの取得中にエラーが発生しました。エラー ページ
データは正常です
読み込みステータス
上記の 3 つの状況では、react がリストをレンダリングするときに、対応するビューを正しく判断してレンダリングする必要があります。これは、vue の v-if とは異なり、条件付きレンダリングです。 v- show などのフレームワークによって提供される API、および React の条件付きレンダリングはすべて、JS にネイティブであり、たとえば、if/else、&&、sanmu などのドキュメントで説明されています。

##もちろん上記はよく使われる方法ですが、条件分岐が多すぎるとコードがどんどん汚くなってしまうなど、さまざまな問題もあります。

#if/else、三項演算子、および短絡演算子

これら 3 つのメソッドは公式ドキュメントで言及されており、ここにまとめられています。実際、これら 3 つのソリューションは似ています。 : レンダリングライフサイクルで対応する判断を行います。ただし、jsx 行内で三項演算子と短絡演算子が使用できることがわかります。ただし、判断分岐が増えると必然的にコードが非常に冗長になり、再利用性も懸念されます。ここでの render は、もちろん、render のライフサイクルの一部ではありません。vue

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

の v-if に対応できます。上記は単純な Render コンポーネントであり、その使用方法です。

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

render /else で if を多用するのと比較すると、上記の記述方法は間違いなく明確です。すべてのリスト ビジネス コンポーネントが統合され、ステータスが一貫している場合、より高いレベルの抽象化を実行し、他のステータスを高次の関数に抽象化できます。コードを記述するときは、成功ステータスが正しく表示されることを確認してください。

関数をすぐに実行します。

jsx に変数を記述し、関数をすぐに実行することもできます。

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

即時関数のレプリケーション明らかに実用的ではないため、即時関数の適用可能なシナリオは、比較的複雑だが再利用できない種類のコンポーネントです

上位コンポーネント

上位コンポーネントの概念については詳しく説明しませんが、条件付きレンダリングのロジックを上位コンポーネントに組み込むことで、コンポーネントの再利用率を向上させることもできます。 ##

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

すべてのリストのプロパティが一貫していることを確認できれば (つまり、すべてのリストがステータスを使用してステータスを決定する)、ステータスを成功のステータスとして書き込むことに完全に集中できます:

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

次に、読み込み、エラー、空のステータスをコンポーネントに抽出できます。これは間違いなくコンポーネントの再利用率の向上に役立ちます。

以上がReactでリストをレンダリングする方法の紹介（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。