← Back to rules

react/function-component-definition 样式

💡 A suggestion is available for this rule for some violations.

作用

强制 React 函数组件使用一致的函数形式。

为什么这是不好的？

混用声明、函数表达式和箭头函数会使组件定义难以预测，也更难快速浏览。

示例

此规则下的错误代码示例：

const Component = () => <div />;

此规则下的正确代码示例：

function Component() {
  return <div />;
}

配置

namedComponents

类型：array | "function-declaration" | "arrow-function" | "function-expression"

namedComponents[n]

类型："function-declaration" | "arrow-function" | "function-expression"

unnamedComponents

类型：array | "arrow-function" | "function-expression"

unnamedComponents[n]

类型："arrow-function" | "function-expression"

使用方法

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/function-component-definition": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/function-component-definition": "error",
  },
});

CLI

oxlint --deny react/function-component-definition --react-plugin

版本

此规则在 v1.75.0 中添加。

参考资料

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground