Build strongly typed polymorphic components with React and TypeScript - Part 2

polymorphic-components-react-2.tsx

import * as React from 'react';

/**
 * یک جنریک تایپ است که بیانگر React.ElementType تایپ
 *  1. می‌باشد HTML تمامی تگ‌های ولید و معتبر
 *  2. می‌تواند یک کامپوننت ری‌اکتی باشد
 */
type ButtonProps<C extends React.ElementType> = {
  as?: C;
  children: React.ReactNode;
};

export const Button = <C extends React.ElementType>({
  as,
  children,
  ...otherProps
}: ButtonProps<C>) => {
          
  /**
   * as در صورت عدم تعیین پراپرتی DOM مقدار پیش‌فرض المنت رندرشده در
  */
  const Component = as || 'button';

  return <Component {...otherProps}>{children}</Component>;
};