Para oferecer suporte a menus de navegação aninhados, estamos usando React.cloneElement para adicionar propriedades aos componentes do menu filho (os componentes do menu são componentes personalizados, com base no react-bootstrap). Para impedir a clonagem de todos os elementos, mesmo que eles não sejam componentes de menu filho, mas componentes de conteúdo regulares, desejo tornar a clonagem condicional.

Todos os componentes do menu são subclasses de 'MenuBase' (que é uma subclasse de React.Component). No meu código, tentei testar se um filho de um componente de reação (lendo this.props.children usando as funções do utilitário React.Children) é uma instância do MenuBase.

Código simplificado:

interface IMenuBaseProps {
  // menu related properties
}

abstract class MenuBase<P extends IMenuBaseProps, S> extends React.Component<P, S> {
  // constructor etc.
}

interface IGeneralMenuProps extends IMenuBaseProps {
  // additional properties
}

class GeneralMenu extends MenuBase<IGeneralMenuProps, {}> {
  public render(): JSX.Element {
    // do some magic
  }
}

Em algum lugar da lógica do menu, quero fazer algo como o seguinte

React.Children.map(this.props.children, (child: React.ReactElement<any>): React.ReactElement<any> ==> {
  if (child instanceof MenuBase) {
    // return clone of child with additional properties
  } else {
    // return child
  }
}

No entanto, esse teste nunca resulta em verdadeiro e, como resultado, nunca é feito um clone.

Nas ferramentas de desenvolvedor do Chrome, posso ver que:

child.type = function GeneralMenu (props)child.type.prototype = MenuBase

Alguém pode me ajudar a esclarecer o seguinte:

Por que a instância de não está funcionandoSe não conseguir usar a instância do teste para algo na cadeia de herança dos componentes de reação, quais são minhas alternativas (sei que posso testar a existência de uma das propriedades do IMenuBaseProps, mas não gosto muito essa solução).