如何在不使用export default的情况下从React函数组件Test中导出变量la

变量la是Test组件的函数内部私有变量，默认无法直接从模块外部访问，可通过以下两种常见方案实现导出（全程不使用export default语法）：

• 方案1：将固定值的la移到组件外部做命名导出（最推荐，适合la为静态常量的场景）
  如果la是固定值、不会随组件渲染/状态发生变化，直接把它提到组件外层，用命名导出的方式暴露即可：

// 组件外部定义+命名导出
export const la = 4

const Test: React.FC <IProps> = ({text}) => 
{
    return(
        ...
    )
};
// 组件也用命名导出，不需要export default
export { Test }

外部使用时直接导入即可：

import { la, Test } from './你的组件文件路径'
console.log(la) // 输出4

• 方案2：将la挂载到组件函数对象上导出（适合la是组件内部动态值的场景）
  如果la会随组件内部状态变化，你可以把它挂载到Test函数对象的属性上，再命名导出Test组件，外部通过组件对象访问该属性：

const Test: React.FC <IProps> = ({text}) => 
{
    const la = 4
    // 如果la是动态变化的，可配合useEffect同步更新这个属性
    Test.la = la
    return(
        ...
    )
};
// 命名导出组件
export { Test }

外部使用方式：

import { Test } from './你的组件文件路径'
console.log(Test.la) // 输出4

注意：该方案如果存在多个Test组件实例，la的值会被最后渲染的实例覆盖，仅适合单实例或不需要区分多实例值的场景。

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