儿童如何通过其功能成分对孩子做出反应？

Question

具有一些功能组件，例如

export const ModalBody = ({ children }) => <div>{children}</div>
export const ModalHeader = ({ title }) => <div><span>!</span><span{title}</span></div>
export const ModalFooter = ({ chuldren }) => <div>{children}</div>

基本组成部分

const Modal = ({ children }) => {
  const child = sortChildren(children);

  return (
    <div>
      <h2><Icon />{child.Header}</n2>
      <div>{child.Body}</div>
      <div>{child.Footer}</div>
    </div> 
  );
}

我通过显示名称（child.type.displayName过滤子级，但是此属性在undefined构建中为production。

由于这些是功能组件，因此不能像这样使用children.type.prototype instanceof ModalBody比较

还有其他方法可以明确确定哪个功能组件属于child吗？