React

生成可复用的 React 组件

支持工具:ChatGPTCursorClaude

使用场景

需要创建一个带有 TypeScript 类型定义、Props 验证和 CSS 模块的 React 功能组件。

Prompt 正文

将以下内容复制到你选择的 AI 工具中。

请为我生成一个可复用的 React `Button` 组件。
要求：
1. 使用 TypeScript。
2. 包含 `variant` (primary, secondary, destructive), `size` (small, medium, large) 和 `onClick` props。
3. 使用 CSS Modules 进行样式隔离。
4. 自动生成相关的 CSS 模块文件。
在 Cursor 中打开

示例输出

// components/Button.tsx
import React from 'react';
import styles from './Button.module.css';

type ButtonProps = {
  variant: 'primary' | 'secondary' | 'destructive';
  size: 'small' | 'medium' | 'large';
  onClick: () => void;
  children: React.ReactNode;
};

export const Button = ({ variant, size, onClick, children }: ButtonProps) => {
  const classNames = `${styles.btn} ${styles[variant]} ${styles[size]}`;
  return <button className={classNames} onClick={onClick}>{children}</button>;
};