Для поддержки вложенных навигационных меню мы используем React.cloneElement для добавления свойств к дочерним компонентам меню (компоненты меню - это пользовательские компоненты, основанные на реакции-начальной загрузки). Чтобы предотвратить клонирование всех элементов, даже если они не являются дочерними компонентами меню, а являются обычными компонентами содержимого, я хочу сделать клонирование условным.

Все компоненты меню являются подклассами «MenuBase» (который сам является подклассом React.Component). В своем коде я попытался проверить, является ли дочерний элемент реагирующего компонента (читая this.props.children с помощью служебных функций React.Children) экземпляром MenuBase.

Упрощенный код:

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

Где-то в логике меню я хочу сделать что-то вроде следующего

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

Тем не менее, этот тест никогда не приводит к истине и в результате клон никогда не производится.

В инструментах разработчика Chrome я вижу, что:

child.type = function GeneralMenu (реквизит)child.type.prototype = MenuBase

Может ли кто-нибудь помочь мне уточнить следующее:

Почему instanceof не работаетЕсли я не могу использовать экземпляр теста для чего-либо в цепочке наследования компонентов реагирования, каковы мои альтернативы (я знаю, что могу проверить наличие одного из свойств IMenuBaseProps, но мне не очень нравится это решение).