Para admitir los menús de navegación anidados, estamos usando React.cloneElement para agregar propiedades a los componentes del menú secundario (los componentes del menú son componentes personalizados, basados en react-bootstrap). Para evitar que clonemos todos los elementos aunque no sean componentes del menú secundario, sino componentes de contenido normal, quiero que la clonación sea condicional.

Todos los componentes del menú son subclases de 'MenuBase' (que a su vez es una subclase de React.Component). En mi código, traté de probar si un elemento secundario de un componente de reacción (leyendo this.props.children mediante el uso de las funciones de la utilidad React.Children) es una instancia de 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
  }
}

En algún lugar de la lógica del menú quiero hacer algo como lo siguiente

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
  }
}

Sin embargo, esta prueba nunca resulta verdadera y, como resultado, nunca se crea un clon.

En las herramientas para desarrolladores de Chrome puedo ver que:

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

Alguien me puede ayudar a aclarar lo siguiente:

¿Por qué la instancia de no funciona?Si no puedo usar la instancia de la prueba para algo en la cadena de herencia de los componentes de reacción, cuáles son mis alternativas (sé que puedo probar la existencia de una de las propiedades de IMenuBaseProps, pero realmente no me gusta esa solución).