10 创建可复用组件

在上一篇中，我们讨论了如何配置 TypeScript 环境，使得我们能够在 React 中使用 TSX 进行开发。这篇文章将重点介绍如何创建可复用的组件，以提高我们的开发效率和代码的可维护性。

什么是可复用组件？

可复用组件是指那些可以在多个地方使用，并且在UI中表现一致的组件。通过将一部分 UI 和逻辑封装起来，我们可以避免重复代码，降低维护成本。

创建简单的可复用按钮组件

我们来创建一个简单的按钮组件 MyButton，它可以接收不同的属性并根据这些属性改变样式和行为。下面是实现的步骤：

第一步：定义组件

在 React 中，可以通过函数组件的方式来定义一个组件。我们将使用 TypeScript 的接口来定义组件的 props。

import React from 'react';

interface MyButtonProps {
  label: string;            // 按钮显示的文字
  onClick: () => void;     // 按钮点击事件的处理函数
  style?: React.CSSProperties; // 可选的样式
}

const MyButton: React.FC<MyButtonProps> = ({ label, onClick, style }) => {
  return (
    <button onClick={onClick} style={style}>
      {label}
    </button>
  );
};

export default MyButton;

在这个例子中，我们定义了一个名为 MyButton 的组件，它接收三个 props：

1. label - 按钮的显示文本。
2. onClick - 点击按钮时调用的函数。
3. style - 可选的 CSS 样式对象。

第二步：使用组件

一旦我们的组件创建完成，就可以在其他地方重复使用它。以下是一个使用 MyButton 组件的示例。

import React from 'react';
import MyButton from './MyButton';

const App: React.FC = () => {
  const handleClick = () => {
    alert('按钮被点击了！');
  };

  return (
    <div>
      <h1>欢迎使用我的按钮组件</h1>
      <MyButton label="点击我" onClick={handleClick} />
      <MyButton label="另一个按钮" onClick={handleClick} style={{ backgroundColor: 'lightblue' }} />
    </div>
  );
};

export default App;

在这个示例中，我们创建了 App 组件并使用了 MyButton。两个按钮分别有不同的 label 和 style 属性。

第三步：样式的定制

在上面的例子中，我们允许通过 style 属性来传递样式。这样可以实现更灵活的组件使用。然而，更复杂的样式通常需要使用 CSS 或 CSS-in-JS。

这里，我们可以扩展 MyButton 组件，允许接收一些预定义的颜色类型。首先，我们定义一个枚举类型来管理按钮的配色方案：

enum ButtonColor {
  PRIMARY = 'blue',
  SECONDARY = 'gray',
  DANGER = 'red',
}

interface MyButtonProps {
  label: string;              
  onClick: () => void;       
  color?: ButtonColor; // 新增颜色属性
}

接着，在组件内部，我们使用该颜色属性来设置按钮的背景颜色：

const MyButton: React.FC<MyButtonProps> = ({ label, onClick, color = ButtonColor.PRIMARY }) => {
  const buttonStyle: React.CSSProperties = {
    backgroundColor: color,
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  };

  return (
    <button onClick={onClick} style={buttonStyle}>
      {label}
    </button>
  );
};

现在，按钮的颜色可以通过 color 属性来指定：

<MyButton label="主要按钮" onClick={handleClick} color={ButtonColor.PRIMARY} />
<MyButton label="危险按钮" onClick={handleClick} color={ButtonColor.DANGER} />

总结

通过创建可复用组件，我们不仅可以提高开发效率，还能增强代码的可读性和维护性。无论是简单的 UI 组件，如按钮、输入框，还是复杂的业务逻辑组件，都可以通过封装为可复用组件来管理。

在下一篇中，我们将深入探讨“组件的生命周期”，帮助你更好地理解组件在 React 应用中的行为与状态管理。继续关注我们系列教程吧！