استفاده از عناصر جریان عمومی برای معرفی اجزای React عمومی

در پروژه‌ای که روی آن کار می‌کردم، مجبور بودم منابع متعددی را مدیریت کنم (که در اینجا نامگذاری شده است Resource1، Resource2، Resource3، … برای سادگی). هر منبع همکار خود را داشتList جزء (Resource1List، Resource2List، …) که هر کدام از نظر اجرا کاملاً مشابه سایرین بودند، زیرا منابع خود به جز چند تفاوت کاملاً مشابه بودند. در زیر انواع آن را مشاهده می کنید Resource1 و Resource2 :

So given these specs, I wanted to build a single ResourceList component to display items of a given resource. Its props would include an onItemClick callback function, which takes a variable of that resource type as an argument. Here’s the first type that I wrote for the props of the ResourceList component:

Now that the component is typed, the next step consists of trying to use it with one of our Resources. Here’s how ResourceList can be used for Resource1 for example:

1
import React from 'react';
2
import ResourceList from 'components/ResourceList';
3
import type { Resource1 } from 'core/types';
6
class Resource1List extends React.Component {
7
  onResource1Click = (item: Resource1) => {
8
    const { name, id } = item;
15
    return ResourceList onItemClick={this.onResource1Click(item)} />;

این زمانی بود که به مشکل اصلی برخورد کردم. با توجه به روشی که من این کامپوننت را معرفی کردم، اجرای Flow در برابر کد موجود در مثال بالا یک خطا ایجاد می کند:

در انواع منابعی که در بالا اعلام کردیم ( Resource1، Resource2 ، ...)، می بینید که کلید فیلد "id" هر منبع مطابقت ندارد. بنابراین وقتی از این کامپوننت استفاده می کنیم و an را می نویسیم onItemClick تابع برای یک منبع، Flow به شما خطایی می دهد که به ما می گوید ویژگی های منابع دیگر از دست رفته اند.

برای غلبه بر این نوع شرایط، داروهای ژنریک می توانند بسیار کاربردی باشند. در اینجا نحوه نوشتن این مؤلفه و رفع این مشکل آمده است:

• ما می توانیم عمومی ارائه دهیم BaseProps نوعی که یک نوع عمومی را می پذیرد T

• استفاده کنید T داخل BaseProps برای ماonItemClick تابعی که یک عنصر از نوع را می گیرد T به عنوان یک استدلال و بنابراین از نوع باشد T => void

• من اعلام می کنم Resource1Props ، Resource2Props و غیره بر اساس BaseProps

• نوع را بنویس Props به عنوان سرشماری از Resource1Props، Resource2Propsو غیره

کد حاصل به شکل زیر است:

3
    onItemSelect = T => void,
6
type Resource1Props = BasePropsResource1>;
7
type Resource2Props = BasePropsResource2>;
9
type Props = Resource1Props | Resource2Props;

یک جریان اجرایی با این نوع باید خروجی زیر را داشته باشد:

اکنون به لطف Flow جزء لیست مشترک خود را به درستی پیاده سازی کرده ایم. ما می بینیم که استفاده از ژنریک ها نه تنها انعطاف پذیری را برای نوع ما به ارمغان می آورد، بلکه در آینده زمانی که بخواهیم استفاده از این مؤلفه را افزایش دهیم تا بتوان با منابع بیشتری از آن استفاده کرد، کمک خواهد کرد.