چگونه در React با توابع رندر سفارشی کامپوننت های لیست قابل استفاده مجدد بسازیم؟

Summarize this content to 400 words in Persian Lang
هنگام کار در 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>
)}
/>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا این یک الگوی عالی است؟

این الگو حداکثر انعطاف پذیری را با حداقل تکرار کد امکان پذیر می کند. به جای ایجاد یک جزء لیست متفاوت برای هر مورد استفاده، یک جزء لیست دارید که می تواند هر نیاز رندرینگ را برطرف کند.

اگر با React Native کار کرده اید، این الگو باید به نظر آشنا باشد، زیرا در اجزای لیست آنها مانند FlatList استفاده می شود. این یک راه حل اثبات شده و قابل اعتماد برای رندر کردن لیست ها است.

با اجازه دادن به کامپوننت لیست خود برای پذیرش renderItem prop، می توانید به راحتی اجزای قابل استفاده مجدد ایجاد کنید که با بخش های مختلف برنامه شما سازگار است. این رویکرد پایگاه کد شما را ساده می کند، نگهداری آن را آسان تر می کند و مقیاس پذیری برنامه شما را افزایش می دهد.

اکنون که این الگو را یاد گرفتید، آن را در پروژه های 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>
      )}
    />
  );
};