← Back to rules

react/jsx-pascal-case 风格

它的作用

强制用户定义的 JSX 组件使用帕斯卡命名法（PascalCase）

为什么这是不好的？

它强制要求用户定义的 JSX 组件以帕斯卡命名法进行定义和引用。需要注意的是，由于 React 的 JSX 使用大小写来区分本地组件类和 HTML 标签，因此此规则不会对以小写字母开头的组件发出警告。

示例

以下为该规则的 错误 示例：

<Test_component />
<TEST_COMPONENT />

以下为该规则的 正确 示例：

<div />

<TestComponent />

<TestComponent>
    <div />
</TestComponent>

<CSSTransitionGroup />

以下为 "allowAllCaps" 选项的 正确 示例：

<ALLOWED />

<TEST_COMPONENT />

以下为 "allowNamespace" 选项的 正确 示例：

<Allowed.div />

<TestComponent.p />

以下为 "allowLeadingUnderscore" 选项的 正确 示例：

<_AllowedComponent />

<_AllowedComponent>
    <div />
</_AllowedComponent>

配置

此规则接受一个包含以下属性的配置对象：

allowAllCaps

type: boolean

default: false

是否允许全大写组件名称。

allowLeadingUnderscore

type: boolean

default: false

是否允许组件名称以下划线开头。

allowNamespace

type: boolean

default: false

是否允许命名空间组件名称。

ignore

type: string[]

default: []

需要忽略的组件名称列表。

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-pascal-case": "error"
  }
}

CLI

oxlint --deny react/jsx-pascal-case --react-plugin

参考资料

• 规则源码