problems in extending the component

[yiakwy]

I am developing a ui intensitve project.

My strategy is

1. in the first stage, I will use existing react component functionalities by extending them so that I can focus on main functionality I am developing. I recently learn that rc-compoents are among core components of ant-design. I thought they should have worked well after being inherited by cutomer components.

for example

class Switch extends RcSwitch {
}
Switch.propTypes = ...

2. in the second stage, I will replace them by my own twisted version one by one.

I found that when I extend them, for example, rc-menu, the props will not be passed correctly from parent to children. How should I implement rc-components?

In antd , they did that in this manner

class SubMenu extends React.Component<any, any> {
  static contextTypes = {
    antdMenuTheme: PropTypes.string,
  };
  // fix issue:https://github.com/ant-design/ant-design/issues/8666
  static isSubMenu = 1;
  private subMenu: any;
  onKeyDown = (e: React.MouseEvent<HTMLElement>) => {
    this.subMenu.onKeyDown(e);
  }
  saveSubMenu = (subMenu: any) => {
    this.subMenu = subMenu;
  }
  render() {
    const { rootPrefixCls, className } = this.props;
    const theme = this.context.antdMenuTheme;
    return (
      <RcSubMenu
        {...this.props}
        ref={this.saveSubMenu}
        popupClassName={classNames(`${rootPrefixCls}-${theme}`, className)}
      />
    );
  }
}

export default SubMenu;

Clearly, I can employ flow-typed in es6 to do the exactly the same thing. But I won't because I think there is some problem in the original implementation so that I cannot simply "extend" it and follow the api provided by documentation. I pursue a nice method to do that without looking into the source code of "rc" series of components.

Could any developers give me some hint?

[picodoth]

@yiakwy in order to further assist you, could you provide a codesandbox link to show props that does not pass down?