如何在Modal组件内部创建可选的Modal.Footer子组件？

要实现Modal.Footer作为Modal的内部组件，且仅在显式使用时才显示，你可以按照以下步骤操作：

1. 定义ModalFooter组件 #

保留你现有的Footer组件，确保它能接收并渲染自定义内容：

const ModalFooter = ({ children }) => {
  return <div className="modal-footer">{children}</div>;
};

2. 创建Modal主组件 #

在Modal组件内部，通过React.Children筛选出类型为ModalFooter的子元素，仅渲染这部分内容（确保只有用户传入<Modal.Footer>时才显示Footer区域）：

import React from 'react';

const Modal = ({ children }) => {
  // 筛选出所有Modal.Footer类型的子元素
  const footerElement = React.Children.toArray(children).find(
    child => child.type === ModalFooter
  );

  return (
    <div className="modal">
      {/* Modal主体内容：筛选掉Footer后的其他子元素 */}
      <div className="modal-content">
        {React.Children.toArray(children).filter(child => child.type !== ModalFooter)}
      </div>
      {/* 仅当存在Footer元素时渲染 */}
      {footerElement}
    </div>
  );
};

3. 将ModalFooter挂载为Modal的静态属性 #

把ModalFooter赋值给Modal.Footer，让用户可以用<Modal.Footer>的方式调用：

Modal.Footer = ModalFooter;

export default Modal;

4. 样式与使用示例 #

你的CSS可以保持不变：

.modal {
  /* Modal容器基础样式 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  padding: 1rem;
  background: white;
}

.modal-content {
  /* 主体内容区域样式 */
  margin-bottom: 1rem;
}

.modal-footer {
  /* Footer样式示例 */
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

使用时的代码示例：

import Modal from './Modal';

// 带Footer的Modal
const App = () => {
  return (
    <Modal>
      <p>这是Modal的主体内容</p>
      <Modal.Footer>
        <button>取消</button>
        <button>确认</button>
      </Modal.Footer>
    </Modal>
  );
};

// 不带Footer的Modal（Footer区域不会渲染）
const AppWithoutFooter = () => {
  return (
    <Modal>
      <p>这是没有Footer的Modal内容</p>
    </Modal>
  );
};

这样就实现了需求：只有当用户显式使用<Modal.Footer>时，Footer区域才会被渲染，且用户可以完全控制Footer内部的自定义内容。

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