Skip to main content

组件开发指南

本文档介绍前端项目中组件的开发规范和最佳实践。

组件结构​

每个组件都应该遵循以下结构：

import React from 'react';
import styles from './ComponentName.module.css';

interface ComponentNameProps {
  title: string;
  onClick?: () => void;
}

const ComponentName: React.FC<ComponentNameProps> = ({ title, onClick }) => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>{title}</h1>
      {onClick && (
        <button onClick={onClick} className={styles.button}>
          点击我
        </button>
      )}
    </div>
  );
};

export default ComponentName;

组件命名规范​

  • 使用PascalCase命名组件
  • 文件名与组件名保持一致
  • 使用描述性的名称

常用组件​

Button组件​

通用的按钮组件，支持多种样式和状态。

Modal组件​

模态框组件，用于显示弹窗内容。

Form组件​

表单组件集合，包括输入框、选择器等。