Typescript：类型“字符串”上不存在属性“类型”

Question

I'm trying to do a React component that has subcomponents within. I've been reading this article to achive so.

The idea is to create a Modal which has Modal.Header, Modal.Body and Modal.Footer.

Although I could create the component and it works fine, I'm having a typing error.

The problem is in a function called getChildrenOnDisplayName. I use the function in the main component to get the subcomponents and render them.

interface ModalProps {
  children: React.ReactNode,
  open?: boolean,
  closeFunc?: () => void,
  preventCloseFromOutside?: boolean,
  hideCloseButton?: boolean,
}

const Modal = ({ children, open, closeFunc, preventCloseFromOutside = false, hideCloseButton = false }: ModalProps) => {

  const header = useMemo(() => getChildrenOnDisplayName(children, "Header"), [children]);
  const body = useMemo(() => getChildrenOnDisplayName(children, "Body"), [children]);
  const footer = useMemo(()=> getChildrenOnDisplayName(children, "Footer"), [children]);

  return (
    <>
      <div className='header'>{header && header}</div>
      <div className='body'>{body && body}</div>
      <div className='footer'>{footer && footer}</div>
            
      <style jsx>
        {` styles...`}
      </style>
    </>
  )
}

The function where I get the error:

const getChildrenOnDisplayName = (children: React.ReactNode, displayName: string) => {
  return React.Children.map(children, (child) => 
   
    child?.type.displayName === displayName ? child : null 
           ^^^^ 
  )
}

The typing error: "Property 'type' does not exist on type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor> | ReactFragment | ReactPortal'. Property 'type' does not exist on type 'string'."

How could I type it?

Thanks in advance!

Answer 1

You will probably have to use the typeof operator to isolate the native types like:

if(typeof child === "string") {
 // string
} else if(typeof child === "boolean") {
 // bool
} else if( .. etc ..) {
 // other types
} else {
 // finally a react element
}