如何在React中创建带有嵌套子组件（如Modal.Header）的组件？

这种组件的核心实现逻辑是将子组件挂载为父组件的静态属性，同时父组件内部可以识别并渲染这些特定的子组件，最终实现像<Modal.Header>这样的嵌套调用方式。以下是具体实现步骤和代码示例：

1. 定义子组件 #

先创建需要嵌套的子组件（比如Header、Body），它们是独立的React组件，负责自身的结构和样式：

// 弹窗头部组件
const CustomModalHeader = ({ children }) => {
  return (
    <div className="modal-header">
      {children}
    </div>
  );
};

// 弹窗内容区域组件
const CustomModalBody = ({ children }) => {
  return (
    <div className="modal-body">
      {children}
    </div>
  );
};

2. 定义父组件并挂载子组件 #

创建父组件CustomModal，并将之前定义的子组件挂载为它的静态属性，同时在父组件内部处理子组件的渲染逻辑：

import React from 'react';

const CustomModal = ({ children, isOpen, onClose }) => {
  // 弹窗未打开时不渲染
  if (!isOpen) return null;

  // 遍历子节点，分离Header和Body
  let headerContent = null;
  let bodyContent = null;

  React.Children.forEach(children, child => {
    if (child.type === CustomModalHeader) {
      headerContent = child;
    } else if (child.type === CustomModalBody) {
      bodyContent = child;
    }
  });

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {headerContent}
        {bodyContent}
        <button className="modal-close-btn" onClick={onClose}>×</button>
      </div>
    </div>
  );
};

// 将子组件挂载为父组件的静态属性
CustomModal.Header = CustomModalHeader;
CustomModal.Body = CustomModalBody;

export default CustomModal;

3. 添加基础样式（可选） #

为了让弹窗更美观，添加对应的CSS样式：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  width: 80%;
  max-width: 500px;
}

.modal-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.modal-body {
  line-height: 1.6;
}

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

4. 使用自定义组件 #

现在可以像React-Bootstrap的Modal一样使用自定义组件：

import { useState } from 'react';
import CustomModal from './CustomModal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="app">
      <button onClick={() => setIsModalOpen(true)}>打开自定义弹窗</button>
      
      <CustomModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <CustomModal.Header>
          <h2>我的自定义弹窗</h2>
        </CustomModal.Header>
        <CustomModal.Body>
          <p>这是弹窗的内容区域，可以放入任意React元素。</p>
          <p>比如表单、图片、文本等等。</p>
        </CustomModal.Body>
      </CustomModal>
    </div>
  );
}

export default App;

扩展说明 #

• 如果需要更多子组件（比如Footer），只需要重复上述步骤：定义CustomModalFooter，再挂载到CustomModal.Footer即可。
• 父组件内部也可以不遍历子节点，而是直接通过props接收子组件内容，不过遍历的方式更符合React-Bootstrap的使用习惯。

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