如何仅用一个名称简洁导出包装后的命名函数？

要实现只用同一个名称完成导出，同时保证传入transform的原始组件有非空的name属性，有两种简洁的写法可以满足需求：

方法一：一行完成（推荐） #

使用命名函数表达式和导出赋值结合，函数表达式的名称和导出变量名可以完全一致：

export const MyComponent = transform(function MyComponent(props) {
  return <h1>Hello {props.name}!</h1>;
});

为什么可行？ #

• 函数表达式的名称MyComponent仅在函数内部作用域有效，但作为参数传递给transform时，OriginalComponent.name会被正确设置为"MyComponent"，满足你的库对非空名称的要求。
• 导出的变量名也是MyComponent，实现了单一名称的需求，不会产生混淆。

方法二：两行写法（更直观） #

如果觉得一行写法稍显紧凑，也可以拆分为先声明命名函数，再导出处理后的组件：

function MyComponent(props) {
  return <h1>Hello {props.name}!</h1>;
}
export const MyComponent = transform(MyComponent);

这种写法同样保证了原始组件有明确的name，且导出名称和原函数名一致。

为什么之前的尝试不生效？ #

• 你尝试的export function transform(function MyComponent(...))属于语法错误：export function后面必须跟随函数名，不能直接嵌套另一个函数定义。
• 匿名箭头函数的写法无法满足需求：箭头函数本身没有name属性（除非通过变量推断，但这种推断的名称不会被OriginalComponent.name捕获到），导致transform无法获取到非空的组件名称。

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