您所指的模式称为复合组件模式。此模式允许您创建父组件（在本例中为Modal）并定义可在父组件中使用的子组件（Modal.Header、Modal.Body等）。这是一种在组件之间共享隐式状态和行为的方法。
以下是您可以如何构建文件和导出：

// Modal.tsx
import React from 'react';

const Modal = ({ children }) => {
  // Modal implementation
};

export default Modal;

// ModalHeader.tsx
import React from 'react';

const ModalHeader = ({ title }) => {
  // ModalHeader implementation
};

export default ModalHeader;

// ModalBody.tsx
import React from 'react';

const ModalBody = ({ children }) => {
  // ModalBody implementation
};

export default ModalBody;

然后在index.tsx文件中，导入这些组件并将其导出为Modal对象的属性：

// index.tsx
import Modal from './Modal';
import ModalHeader from './ModalHeader';
import ModalBody from './ModalBody';

Modal.Header = ModalHeader;
Modal.Body = ModalBody;

export default Modal;

这允许您按照示例中所示的方式使用组件。Modal、Modal.Header和Modal.Body组件都可以从Modal导出中访问。这种模式通常用于react-bootstrap等库中。

它是一个复合组件设计，您可以设计各种子组件并使用它们。从单个索引页（从该索引页调用所有单个组件）导出时，
你可以在下面找到文件夹结构

• 模态
• index.tsx
• Header.tsx
• Body.tsx