小编Bjö*_*art的帖子

为了支持嵌套导航菜单,我们使用React.cloneElement向子菜单组件添加属性(菜单组件是自定义组件,基于react-bootstrap).为了防止我们克隆所有元素,即使它们不是子菜单组件,而是常规内容组件,我想要克隆条件.

所有菜单组件都是'MenuBase'的子类(它本身是React.Component的子类).在我的代码中,我试图测试一个react组件的子代(通过使用React.Children实用程序函数读取this.props.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开发者工具中,我可以看到: …