Um verschachtelte Navigationsmenüs zu unterstützen, verwenden wir React.cloneElement, um Eigenschaften zu untergeordneten Menükomponenten hinzuzufügen (die Menükomponenten sind benutzerdefinierte Komponenten, die auf React-Bootstrap basieren). Um zu verhindern, dass wir alle Elemente klonen, obwohl es sich nicht um untergeordnete Menükomponenten handelt, sondern um reguläre Inhaltskomponenten, möchte ich das Klonen von Bedingungen abhängig machen.

Alle Menükomponenten sind Unterklassen von 'MenuBase' (die selbst eine Unterklasse von React.Component ist). In meinem Code habe ich versucht zu testen, ob ein untergeordnetes Element einer Reaktionskomponente (Lesen von this.props.children mithilfe der React.Children-Dienstprogrammfunktionen) eine Instanz von MenuBase ist.

Vereinfachter Code:

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

Irgendwo in der Menülogik möchte ich so etwas wie das folgende tun

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

Dieser Test führt jedoch niemals zu true und daher wird niemals ein Klon erstellt.

In den Chrome-Entwicklertools kann ich Folgendes sehen:

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

Kann mir jemand helfen, Folgendes zu klären:

Warum funktioniert instanceof nichtWenn ich keine Instanz des Tests für etwas in der Vererbungskette von Reaktionskomponenten verwenden kann, welche Alternativen stehen mir zur Verfügung (ich weiß, dass ich die Existenz einer der Eigenschaften von IMenuBaseProps testen kann, aber ich weiß es nicht wirklich) wie diese Lösung).