component-naming

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Component Naming Conventions Skill

React组件命名规范技能

This skill helps you enforce consistent React component naming conventions across the codebase.

本技能可帮助你在整个代码库中统一React组件的命名规范。

When to Use This Skill

适用场景

Creating new React components
Reviewing component names in PRs
Refactoring existing components
Ensuring codebase consistency

创建新的React组件
评审PR中的组件名称
重构现有组件
确保代码库一致性

Naming Rules

命名规则

1. PascalCase

1. PascalCase命名法

All React components use PascalCase:

typescript

// ✅ Good
export const TrendChart = () => {};
export const HeroPost = () => {};

// ❌ Bad
export const trendChart = () => {};
export const trend_chart = () => {};

所有React组件均使用PascalCase：

typescript

// ✅ 正确示例
export const TrendChart = () => {};
export const HeroPost = () => {};

// ❌ 错误示例
export const trendChart = () => {};
export const trend_chart = () => {};

2. Domain + Role Pattern

2. 领域+角色模式

Combine domain context with component role for clarity:

typescript

// ✅ Good - Clear domain and role
export const TrendChart = () => {};       // Trend (domain) + Chart (role)
export const HeroPost = () => {};         // Hero (domain) + Post (role)
export const MetricCard = () => {};       // Metric (domain) + Card (role)
export const LatestCoePremium = () => {}; // LatestCoe (domain) + Premium (role)

// ❌ Bad - Too generic or unclear
export const Chart = () => {};            // No domain context
export const Data = () => {};             // Meaningless
export const Item = () => {};             // No specificity

结合领域上下文与组件角色，提升清晰度：

typescript

// ✅ 正确示例 - 领域与角色清晰明确
export const TrendChart = () => {};       // Trend（领域） + Chart（角色）
export const HeroPost = () => {};         // Hero（领域） + Post（角色）
export const MetricCard = () => {};       // Metric（领域） + Card（角色）
export const LatestCoePremium = () => {}; // LatestCoe（领域） + Premium（角色）

// ❌ 错误示例 - 过于通用或模糊
export const Chart = () => {};            // 无领域上下文
export const Data = () => {};             // 无实际意义
export const Item = () => {};             // 缺乏特异性

3. Compound Components for Subparts

3. 复合组件处理子部件

Use dot notation for related subcomponents:

typescript

// ✅ Good - Compound component pattern
export const HeroPost = () => {};
HeroPost.Image = () => {};
HeroPost.Title = () => {};
HeroPost.Meta = () => {};

// Usage
<HeroPost>
  <HeroPost.Image src={...} />
  <HeroPost.Title>...</HeroPost.Title>
  <HeroPost.Meta date={...} />
</HeroPost>

// ❌ Bad - Flat naming for related components
export const HeroPostImage = () => {};
export const HeroPostTitle = () => {};
export const HeroPostMeta = () => {};

使用点语法命名相关子组件：

typescript

// ✅ 正确示例 - 复合组件模式
export const HeroPost = () => {};
HeroPost.Image = () => {};
HeroPost.Title = () => {};
HeroPost.Meta = () => {};

// 使用方式
<HeroPost>
  <HeroPost.Image src={...} />
  <HeroPost.Title>...</HeroPost.Title>
  <HeroPost.Meta date={...} />
</HeroPost>

// ❌ 错误示例 - 相关组件采用扁平化命名
export const HeroPostImage = () => {};
export const HeroPostTitle = () => {};
export const HeroPostMeta = () => {};

4. Avoid Problematic Suffixes

4. 避免使用问题后缀

Never use these suffixes:

typescript

// ❌ Avoid these suffixes
export const MetricCardContainer = () => {};  // -Container
export const ChartWrapper = () => {};         // -Wrapper
export const DataComponent = () => {};        // -Component
export const ListElement = () => {};          // -Element

// ✅ Use clear domain + role instead
export const MetricCard = () => {};
export const TrendChart = () => {};
export const RegistrationList = () => {};

切勿使用以下后缀：

typescript

// ❌ 应避免的后缀
export const MetricCardContainer = () => {};  // -Container
export const ChartWrapper = () => {};         // -Wrapper
export const DataComponent = () => {};        // -Component
export const ListElement = () => {};          // -Element

// ✅ 替代方案：使用清晰的领域+角色命名
export const MetricCard = () => {};
export const TrendChart = () => {};
export const RegistrationList = () => {};

5. Avoid Layout/Styling Descriptions

5. 避免布局/样式描述

Names should describe purpose, not appearance:

typescript

// ❌ Bad - Describes layout/styling
export const LeftSidebar = () => {};
export const BigHeader = () => {};
export const RedButton = () => {};
export const TwoColumnLayout = () => {};

// ✅ Good - Describes purpose
export const NavigationSidebar = () => {};
export const PageHeader = () => {};
export const DangerButton = () => {};
export const ComparisonLayout = () => {};

组件名称应描述用途，而非外观：

typescript

// ❌ 错误示例 - 描述布局/样式
export const LeftSidebar = () => {};
export const BigHeader = () => {};
export const RedButton = () => {};
export const TwoColumnLayout = () => {};

// ✅ 正确示例 - 描述用途
export const NavigationSidebar = () => {};
export const PageHeader = () => {};
export const DangerButton = () => {};
export const ComparisonLayout = () => {};

File Naming Convention

文件命名规范

Files use kebab-case matching the component name:

Component	File Name
`TrendChart`	`trend-chart.tsx`
`HeroPost`	`hero-post.tsx`
`MetricCard`	`metric-card.tsx`
`LatestCoePremium`	`latest-coe-premium.tsx`

文件采用kebab-case命名，与组件名称对应：

组件名称	文件名
`TrendChart`	`trend-chart.tsx`
`HeroPost`	`hero-post.tsx`
`MetricCard`	`metric-card.tsx`
`LatestCoePremium`	`latest-coe-premium.tsx`

Validation Checklist

验证检查清单

Examples from Codebase

代码库示例

Good patterns found:

```
TrendAreaChart
```
- Trends domain + Area Chart role
```
MarketShareDonut
```
- Market Share domain + Donut role
```
TopMakesChart
```
- Top Makes domain + Chart role
```
PremiumBanner
```
- Premium domain + Banner role
```
MetricCard
```
- Metric domain + Card role
```
LatestCoePremium
```
- Latest COE domain + Premium role

Anti-patterns to avoid:

Generic names:
```
Chart
```
,
```
Card
```
,
```
List
```
,
```
Data
```
Layout names:
```
LeftPanel
```
,
```
MainContent
```
,
```
TopSection
```
Suffix pollution:
```
CardContainer
```
,
```
ListWrapper
```
,
```
ItemComponent
```

符合规范的模式：

```
TrendAreaChart
```
- Trends领域 + Area Chart角色
```
MarketShareDonut
```
- Market Share领域 + Donut角色
```
TopMakesChart
```
- Top Makes领域 + Chart角色
```
PremiumBanner
```
- Premium领域 + Banner角色
```
MetricCard
```
- Metric领域 + Card角色
```
LatestCoePremium
```
- Latest COE领域 + Premium角色

需避免的反模式：

通用名称：
```
Chart
```
、
```
Card
```
、
```
List
```
、
```
Data
```
布局相关名称：
```
LeftPanel
```
、
```
MainContent
```
、
```
TopSection
```
后缀滥用：
```
CardContainer
```
、
```
ListWrapper
```
、
```
ItemComponent
```

component-naming

Original

Translation

Component Naming Conventions Skill

React组件命名规范技能

When to Use This Skill

适用场景

Naming Rules

命名规则

1. PascalCase

1. PascalCase命名法

2. Domain + Role Pattern

2. 领域+角色模式

3. Compound Components for Subparts

3. 复合组件处理子部件

4. Avoid Problematic Suffixes

4. 避免使用问题后缀

5. Avoid Layout/Styling Descriptions

5. 避免布局/样式描述

File Naming Convention

文件命名规范

Validation Checklist

验证检查清单

Examples from Codebase

代码库示例

Related Files

相关文件