Question

我正在尝试完全相同，但使用Typescript。

这一行（就在导出语句之前）：

Sidebar.Item = SidebarItem;

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

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

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

但这会导致此错误：Public property 'Item' of exported class has or is using private name 'SidebarItem'.

我尝试删除此行：

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>

我真的想摆脱.default中的Sidebar。

我在这里做错了什么？

Answer 1

此模块设计有误。

可能可以通过以下方式完成：

export class SidebarItem ...

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

并没有充分的理由说明为什么这两个组件应该保持这样的层次结构。

传统上有 CamelCased 组件，并且如果有多个相等值的导出（哪些组件是），则使用单独的命名导出。命名导出更适合在IDE中自动导入：

export { Sidebar, SidebarItem };

在需要时，

Item无法通过默认导出进行树动。 Sidebar.Item缩放效率低于SidebarItem。

Answer 2

您的第一个解决方案几乎是正确的，但您将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 '...'。