React TypeScript懒加载组件displayName设置及列表key使用问题问询

场景说明 #

我在React TypeScript项目中渲染一组菜单项，其中部分菜单项初始状态下隐藏，要等用户调整屏幕宽度后才显示。这些延迟显示的菜单项我用React.lazy来加载，代码示例如下：

const MyMenuItem = React.lazy(
  () => import('../MenuItems/MyMenuItem'),
);

遇到的问题 #

我想给每个菜单项设置唯一的key，打算用组件的displayName来实现。但尝试给懒加载后的组件设置displayName时：

NewFolderMenuItem.displayName = 'NewFolder'

TypeScript弹出警告：

Property 'displayName' does not exist on type 'LazyExoticComponent<(props: MenuItemProps) => Element>.'

我知道可以把懒加载结果强制转换成“非exotic”组件，但ExoticComponent的类型注释里明确写着：

We don't just use ComponentType or SFC types because you are not supposed to attach statics to this object, but rather to the original function.

我理解应该把displayName附加到被懒加载的原组件上，但这么操作后，运行时懒加载组件的displayName依然显示undefined。

我的疑问 #

• 正确的处理方式是什么？
• 能不能直接把懒加载组件转为普通组件？
• 为什么ExoticComponent不允许添加静态属性？

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