Как отличить, был ли стилизованный компонент создан с помощью компонента React или другого стилизованного компонента / собственного тега

Question

У меня очень сложный компонент, и я хочу предотвратить передачу компонентов React и стилизованных компонентов, которые были созданы с использованием компонентов React. Единственные компоненты, которые я хочу разрешить: 1) другие «простые» стилизованные компоненты 2) собственные теги (например, div). Например:

function SophisticatedComponent({
  element,
}) {
  if (isReactComponent(element)) {
    throw new Error('React components are forbidden!');
  }
  ...
}


function ReactComponent() {
  return (
    <div/>;
  );
}

<SophisticatedComponent element={<ReactComponent/>}/> // THROW

<SophisticatedComponent element={<div><ReactComponent/></div>}/> // OK

const StyledComponent = styled.div``;
<SophisticatedComponent element={<StyledComponent><ReactComponent/></StyledComponent>}/> // OK

const StyledReactComponent = styled(ReactComponent)``;
<SophisticatedComponent element={<StyledReactComponent/>}/> // THROW

Как мне написать эту функцию isReactComponent, чтобы различать компоненты React и стилизованные компоненты?

Answer 1

Это функция:

function isReactComponent({type}) {
  if (typeof type === 'string') { // <div><ReactComponent/></div>
    return false;
  }
  if (typeof type === 'object') { // <ReactComponent/>
    return true;
  }
  if (typeof type === 'function' && typeof type.target === 'string') { // <StyledComponent><ReactComponent/></StyledComponent>
    return false;
  }
  if (typeof type === 'function' && typeof type.target === 'object') { // <StyledReactComponent/>
    return true;
  }
}