用 React + TypeScript 封装 UI 组件，摆脱第三方 UI 库的束缚

一个好的 UI 组件库可以让前端开发事半功倍。我们有许多第三方 UI 组件库可以选择，如 Material UI、Ant Design 和 Chakra UI。但这些组件库虽然强大，却也会带来一些限制。比如，它们的主题可能与你的项目设计不符，或者你可能需要自定义组件以满足特定需求。

脱离第三方 UI 组件库，用 React + TypeScript 封装自己的 UI 组件，可以让你拥有完全的控制权，打造出真正符合项目需求的组件。下面，我们将介绍如何用 React + TypeScript 封装一个简单的 Button 组件。

项目环境搭建

首先，你需要创建一个新的 React 项目并安装 TypeScript：

npx create-react-app my-demo --template typescript

然后，安装必要的依赖项：

npm install styled-components

项目依赖

在项目中，我们将使用 styled-components 来为我们的组件添加样式。

创建支持 TypeScript 的 React 项目

我们用以下命令创建一个支持 TypeScript 的 React 项目：

npx create-react-app my-demo --template typescript

封装 Button 组件

在 src 目录下创建一个名为 Button.tsx 的文件，并输入以下代码：

import styled from "styled-components";
import { forwardRef, ForwardRefRenderFunction } from "react";

const StyledButton = styled.button`
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #000;
  cursor: pointer;

  &:hover {
    background-color: #eee;
  }
`;

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ children, ...props }, ref) => {
    return (
      <StyledButton {...props} ref={ref}>
        {children}
      </StyledButton>
    );
  }
);

export interface ButtonProps {
  type?: "button" | "submit" | "reset";
}

export default Button;

在这个组件中，我们使用了 styled-components 来定义按钮的样式，并使用 forwardRef 来将按钮的 ref 传递给外部组件。

使用 Button 组件

在 App.tsx 中，我们可以使用 Button 组件：

import Button from "./Button";

const App = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
};

export default App;

优点

脱离第三方 UI 组件库，用 React + TypeScript 封装自己的 UI 组件，有以下优点：

• 完全控制权： 你可以完全控制组件的外观、行为和功能。
• 更轻量级： 自己封装的组件通常比第三方组件更轻量级，因为它们只包含你需要的内容。
• 更高的可定制性： 你可以轻松地自定义组件以满足你的特定需求。
• 更好的性能： 自己封装的组件往往比第三方组件性能更好，因为它们没有不必要的代码。

当然，自己封装 UI 组件也有一些缺点，比如需要花费更多的时间和精力。但如果你需要高度定制化和完全控制，那么自己封装组件可能是值得的。