React中是否存在可用于组件的访问修饰符？能否限制组件导入范围？

问题答案 #

ES 模块规范本身没有提供原生的导出访问限制能力，只要其他组件知道目标组件的文件路径，默认都可以导入。但我们可以通过工程化约定+工具校验的方式，实现和OOP中private/protected访问修饰符类似的限制效果，常用方案有以下几种：

• 目录约定+索引收口（最常用的轻量方案）

  把仅允许内部访问的组件放到统一命名的私有目录下，比如命名为_internal，同业务模块的公共组件统一从入口文件导出。
  举个目录结构示例：

  components/
  └── Button/
      ├── _internal/ # 私有目录，约定仅同模块下的文件可以导入
      │   └── BaseButton.jsx # 不对外公开的基础组件
      ├── index.js # 模块对外出口，仅导出公开的Button、ButtonGroup组件
      ├── Button.jsx
      └── ButtonGroup.jsx # 仅这个文件可以导入_internal下的BaseButton
  

  要做强制校验的话，可以配ESLint的no-restricted-imports规则，禁止业务代码直接导入**/_internal/**路径下的文件，仅给允许访问的组件配置豁免规则即可。

• 运行时调用校验

  如果你需要在代码层面做调用限制，可以给组件加调用方校验逻辑，开发环境下不符合要求直接抛出错误：

  // 仅允许被Button、ButtonGroup两个组件调用的内部组件
  const ALLOWED_CALLERS = ['Button', 'ButtonGroup']
  
  // 从错误栈中获取调用方组件名
  const getCallerComponentName = () => {
    const stack = new Error().stack
    return stack?.split('\n')[2]?.match(/at (\w+)/)?.[1]
  }
  
  const InternalBaseButton = (props) => {
    if (process.env.NODE_ENV === 'development') {
      const callerName = getCallerComponentName()
      if (!ALLOWED_CALLERS.includes(callerName)) {
        throw new Error(`InternalBaseButton 不允许被${callerName}组件调用`)
      }
    }
    return <button {...props} />
  }
  
  export default InternalBaseButton
  

  这种方式依赖打包后的错误栈格式，仅适合开发阶段做校验提醒，生产环境可以去掉相关逻辑避免性能损耗。

• Monorepo 包级限制

  如果你的项目是拆分为多包的Monorepo结构，还可以通过包依赖规则做限制：把不公开的组件单独拆为私有包，仅给允许访问的包添加该私有包的依赖，其他包无法安装导入这个组件。

目前JavaScript生态还没有原生的模块级私有导出能力，以上方案都是通过约定和工具链实现的管控，完全可以覆盖日常项目的访问限制需求。

内容的提问来源于stack exchange，提问作者UJJWAL VERMA