React JS跨文件导出导入变量实现方法及报错问题解决

报错原因 #

你当前代码出现hi未定义报错有两个核心问题：

1. 变量作用域不匹配：hi是App组件内部通过useState声明的局部变量，作用域仅局限在App函数的花括号范围内，函数外部的export {hi}语句根本访问不到这个变量。
2. 基础语法遗漏：App.js中使用了useState但没有提前从React包导入，也会触发运行错误。

跨文件导出导入变量的正确写法 #

如果要通过ES模块的导出导入语法共享变量，必须把变量定义在模块顶层作用域（也就是所有函数、代码块的外部），示例如下：

App.js 修正后代码 #

// 提前导入useState
import React, { useState } from 'react'
import Test from './Test'

// 定义在模块顶层的变量才能被导出
export const hi = 'Hello World'

function App() {
  // 如果需要在App组件内把这个值作为响应式状态使用，可以赋值给useState作为初始值
  const [hiState, setHiState] = useState(hi)

  return (
    <div className='App'>
      <Test /> 
    </div>
  );
}

export default App

Test.js 代码（无需修改即可正常运行） #

import React from 'react'
import { hi } from './App'

function Test() {
    return (
        <div>
            {hi}
        </div>
    )
}

export default Test

认知正误判断 #

你认为「导出导入变量比传递props更便捷」的认知是错误的，核心原因如下：

• 普通导出的变量不具备响应性：顶层导出的是静态值，如果你后续修改了这个值，依赖它的组件不会自动更新渲染，无法满足React响应式数据传递的需求。而props会跟随父组件的状态自动更新，子组件可以实时拿到最新值。
• 组件耦合度极高：直接导入其他组件的变量会让子组件和父组件强绑定，后续无法复用该子组件到其他业务场景。而props是透明的传参接口，子组件不依赖任何父组件的内部实现，复用性极强。
• 适用场景完全不同：跨文件导出导入的方式仅适合共享全局静态常量（比如固定的枚举值、站点配置、静态接口地址等），绝对不能用于组件间的动态数据传递。如果确实有跨层级组件传参、不想逐层传props的需求，可以使用React原生的Context API，或者第三方状态管理工具。

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