react/no-multi-comp Restriction

阻止在同一个文件中定义多个 React 组件。

在单个文件中声明多个组件会使代码库更难导航和维护。为了更好的组织性和可复用性，每个组件理想情况下都应该放在各自的文件中。

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

jsx

function Foo({ name }) {
  return <div>Hello {name}</div>;
}

function Bar({ name }) {
  return <div>Hello again {name}</div>;
}

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

jsx

function Foo({ name }) {
  return <div>Hello {name}</div>;
}

配置

type: boolean

default: false

当为 true 时，此规则将忽略无状态组件，并允许你在同一个文件中包含多个无状态组件。或者在同一个文件中包含一个有状态组件和一个或多个无状态组件。

无状态基本上就是指函数组件，包括通过 memo 和 forwardRef 创建的组件。

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

Config (.oxlintrc.json)Config (oxlint.config.ts)CLI

json

{
  "plugins": ["react"],
  "rules": {
    "react/no-multi-comp": "error"
  }
}

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/no-multi-comp": "error",
  },
});

bash

oxlint --deny react/no-multi-comp --react-plugin

此规则是在 v1.43.0 中添加的。