从0-1实现一个组件库（2）：构建一个Button

2023-10-16 10:34:10

利用现代工具和最佳实践构建可复用的组件库 Button 组件

组件库中的 Button 组件：实现、用法和最佳实践

在软件开发中，组件库正变得越来越流行，它们提供了一组可重用的组件，可以加速开发并确保一致性。在本文中，我们将深入探讨如何在组件库中实现一个 Button 组件，同时利用现代工具和最佳实践。

构建 Button 组件

1. 创建一个新的组件

首先，在组件库的 src 目录中创建一个名为 Button 的新目录。在该目录中，创建一个 Button.tsx 文件，如下所示：

import React from "react";

const Button = ({ children, ...props }) => {
  return (
    <button type="button" {...props}>
      {children}
    </button>
  );
};

export default Button;

2. 设置样式

接下来，在 src/styles/index.css 中为 Button 组件添加样式：

.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.btn--primary {
  background-color: #007bff;
}

.btn--secondary {
  background-color: #6c757d;
}

3. 添加类型定义

在 src/types.ts 文件中，为 Button 组件添加类型定义：

export interface ButtonProps {
  children: React.ReactNode;
  className?: string;
  type?: "button" | "submit" | "reset";
  disabled?: boolean;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
}

4. 添加单元测试

在 src/tests 目录中，创建一个 Button.test.tsx 文件，并添加单元测试：

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import Button from "../Button";

describe("Button", () => {
  it("should render correctly", () => {
    const { getByText } = render(<Button>Click me</Button>);
    expect(getByText("Click me")).toBeInTheDocument();
  });

  it("should be disabled", () => {
    const { getByText } = render(<Button disabled>Click me</Button>);
    expect(getByText("Click me")).toBeDisabled();
  });

  it("should call onClick handler", () => {
    const onClick = jest.fn();
    const { getByText } = render(<Button onClick={onClick}>Click me</Button>);
    fireEvent.click(getByText("Click me"));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

使用 Button 组件

现在我们的 Button 组件已经实现了，让我们在组件库的演示页面中使用它：

import React from "react";
import Button from "../components/Button";

const Demo = () => {
  return (
    <div>
      <h1>Button Demo</h1>
      <Button>Default Button</Button>
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary" disabled>Secondary Button (Disabled)</Button>
    </div>
  );
};

export default Demo;