React でカスタムレンダー関数を使用して再利用可能なリストコンポーネントを構築するにはどうすればよいですか?-jsチュートリアル-php.cn

React でカスタムレンダー関数を使用して再利用可能なリストコンポーネントを構築するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-09-24 06:28:02

オリジナル

317 人が閲覧しました

How to Build Reusable List Components in React with Custom Render Functions?

React で作業する場合、データを受け取り、各項目をマップして表示するリストコンポーネントを使用するのが一般的です。ただし、アプリケーションの異なる部分では、同じデータに対して異なるレンダリングが必要になる場合があります。これに対する最善の解決策は、レンダリングプロップを使用してカスタムレンダリング関数を渡すことで、リストコンポーネントをより柔軟にすることです。

なぜこれが必要なのでしょうか?

アプリケーションにユーザーのリストがあると想像してください。一部の領域ではユーザー名のみを表示する必要があり、他の領域では電子メールアドレスやプロフィール写真などの詳細情報を表示する必要があります。ユースケースごとに複数のリストコンポーネントを作成すると、コードの重複が発生し、プロジェクトの保守が困難になる可能性があります。

解決策は何でしょうか？

シンプルで洗練された解決策は、リストコンポーネントに renderItem 関数を受け入れるようにすることです。この関数は、個々のアイテム (この場合はユーザー) を引数として受け取り、任意の方法でレンダリングできる React ノードを返します。

import React from 'react';

const List = ({ data, renderItem }) => {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>
          {renderItem(item)}
        </li>
      ))}
    </ul>
  );
};

export default List;

ログイン後にコピー

このコンポーネントの使用方法

import List from './List';

const users = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
];

const UserList = () => {
  return (
    <List
      data={users}
      renderItem={(user) => <span>{user.name}</span>}
    />
  );
};

// or 

const DetailedUserList = () => {
  return (
    <List
      data={users}
      renderItem={(user) => (
        <div>
          <strong>{user.name}</strong>
          <p>{user.email}</p>
        </div>
      )}
    />
  );
};

ログイン後にコピー