javascript - 在 Typescript 中使用点符号进行多次导出

Question

引用。 this question .

我正在尝试做完全相同的事情，但使用的是 Typescript。

问题

这一行(就在导出语句之前):

Sidebar.Item = SidebarItem;

给出编译错误:Property 'Item' does not exist on type 'typeof Sidebar'

尝试的解决方案 1

我已经尝试将 Item 添加到我的 Sidebar 类定义中，如下所示:

class Sidebar extends Component<SidebarProps, SidebarState> {
    Item: SidebarItem;
    ...
}

但这会导致此错误:导出类的公共(public)属性“Item”具有或正在使用私有(private)名称“SidebarItem”。

尝试的解决方案 2

我试过删除这一行:

Sidebar.Item = SidebarItem;

我没有将 Item 添加到我的类定义中，而是像这样导出两个类:

export default Sidebar;
export { SidebarItem as Item };

哪个编译，我可以像这样导入所有东西:

import * as Sidebar from '...';

但是我必须像这样使用它们:

<Sidebar.default>
    <Sidebar.Item></Sidebar.Item>
    <Sidebar.Item></Sidebar.Item>
</Sidebar.default>

我真的很想去掉 Sidebar 中的 .default。

我在这里做错了什么？

Answer 1

您的第一个解决方案几乎是正确的，但是您将 Item 声明为 Sidebar 类对象的属性，而不是类本身的属性。您可以使用静态属性声明来完成后者。这应该有效:

export class SidebarItem ..
..
class Sidebar extends Component<SidebarProps, SidebarState> {
  static Item = SidebarItem;
..
export default Sidebar;

您不再需要 Sidebar.Item = SidebarItem; 行，但您可能需要移动 SidebarItem 类，使其出现在 Sidebar< 之前。导入只是 import Sidebar from '...'。