Build Polymorphic Components with React and Typescript

扩展您对可重用组件的知识并利用您最喜欢的开源 React 库使用的技术…

多态组件？

你可能以前用过它们……如果你用过 Material UI 的 component prop 或 Chakra UI 的 as prop，那么你已经遇到过多态 React 组件。

在本课程中，您将学习构建自己的多态组件，该组件可以呈现为任何有效的 HTML 元素。更重要的是，您将学习根据提供的元素类型强类型化其允许的道具。在此过程中将讨论许多用例和边缘案例，以帮助您构建更强大的可重用 React 组件，并拥有出色的开发人员体验。

你如何应用这些知识？

1. 构建更灵活的可重用组件
2. 将获得的知识应用于构建自己的设计系统
3. 探索真正强类型多态组件的中间 Typescript 概念

先决条件

1. 你熟悉 React 基础知识
2. 你熟悉 Typescript 基础知识

这门课是为谁准备的？

1. React 开发人员构建设计系统
2. React 开发人员构建可重用组件
3. React Typescript 开发人员
4. 其他好奇的中级 React 开发人员

总之，这不是初学者的课程。您需要了解一些 React 和一些 Typescript（至少是基础知识，即您知道什么是“类型”）。

您将在本课程中学习中级打字稿。这将是实用、有效且直截了当的 – 您将实际完成的课程。

您将学习构建自己的多态组件，该组件可以呈现为任何有效的 HTML 元素。这很容易！不那么容易的是根据提供的元素类型强输入其允许的道具。动态限制组件 props，对传递给 props 的引用进行类型安全，甚至构建一个可以在任何其他可重用组件上重用的实用程序。

在此过程中将讨论许多用例和边缘案例，以帮助您构建更强大的可重用 React 组件，并拥有出色的开发人员体验。