这样创造

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

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

Modal.Footer = ModalFooter;
export default Modal;

可以使用props.children属性在组件中创建组件。React中的props.children属性是一个特殊属性，允许您在使用组件时在该组件的开始标记和结束标记之间传递内容。
以下示例说明如何使用props.children属性将ModalFooter组件嵌套在Modal组件中：

import React from 'react';

export const Modal = ({ children }) => {
  return (
    <div className="modal">
      {children}
    </div>
  );
}

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

.modal-footer {
  // css to make footer sticky or scrollable
}

然后，可以按如下方式使用Modal和ModalFooter组件：

<Modal>
  <Modal.Footer>
    // any custom content. User can completely control behavior of this content. 
  </Modal.Footer>
</Modal>

ModalFooter组件将显示在Modal组件内部，Modal.Footer标记之间的内容也将通过props.children属性提供给ModalFooter组件。