← Back to rules

react/no-multi-comp 限制

它的作用

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

为什么这是不好的？

在一个文件中声明多个组件会使代码库更难导航和维护。每个组件理想情况下应位于其独立的文件中，以获得更好的组织性和可重用性。

示例

此规则的错误代码示例：

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

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

此规则的正确代码示例：

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

配置

ignoreStateless

type: boolean

default: false

当设置为 true 时，该规则将忽略无状态组件，允许在同一文件中定义多个无状态组件。或者在同一文件中定义一个有状态组件和一个或多个无状态组件。

无状态基本意味着函数组件，包括通过 memo 和 forwardRef 创建的组件。

如何使用

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

配置 (.oxlintrc.json)

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

CLI

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

参考资料

• 规则源码