ReactJS - محدود کردن فرزندان مجاز در React TypeScript

استفاده از تایپاسکریپت در یک پروژه ریاکت، آیا راهی وجود دارد که بتوان محدودیتهایی بر روی فرزندان مجاز یک کامپوننت اعمال کرد؟ زمان کامپایل ترجیح داده میشود، اما زمان اجرا هنوز هم میتواند مفید باشد.

در مورد من، یک کامپوننت دارم، آن را <ClickTracker> بنامید، و انتظار دارد که یک فرزند داشته باشد با یک پراپ callback به نام onClick و این کامپوننت عملکرد اضافی به callback اضافه میکند (ردیابی کلیک در یک کتابخانه خارجی).

این به خوبی کار میکند تا زمانی که فرزند داخل <ClickTracker> واقعاً از یک خاصیت onClick استفاده کند (تمام عناصر HTML این را پیادهسازی میکنند، برای مثال)، اما در غیر این صورت بدون هیچ پیغام خطایی شکست میخورد.

برای مثال، این کار میکند:

<ClickTracker>
  <div>Hello</div>
</ClickTracker>

اما این کار نمیکند:

class Hello extends Component<{}, {}> {
  render() {
    return <div>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

اما این کار میکند چون onClick را به یک المان HTML منتقل میکند:

class Hello extends Component<{onClick: MouseEventHandler}, {}> {
  render() {
    return <div onClick={this.props.onClick}>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

همانطور که میبینید، من دوست دارم حول اینکه چه چیزی میتواند داخل <ClickTracker> بر اساس props فرزند قرار گیرد، کمی ایمنی داشته باشم. یا اگر راه دیگری برای انجام این کار وجود دارد.

پاسخ شماره ۱

در حال حاضر، هیچ راهی برای اعمال نوع children با TypeScript وجود ندارد.

اطلاعات بیشتری در این شماره وجود دارد.

پاسخ شماره ۲

یا اگر راه دیگری برای انجام این کار وجود دارد

رویدادهای کلیک به سمت بالا نفوذ میکنند مگر اینکه برخی از مؤلفهها انتشار را متوقف کرده باشند (این رفتار پیشفرض مؤلفههای بومی نیست). بنابراین شما میتوانید:

<div onClick={()=>alert('still noted')}>
  <Hello />
</div>

و آن div همان ClickTracker شماست 🌹