What is your rating of Aasaanjobs

Ant-design: A list of the components of `antd` that cannot work with HOC

It's difficult to use because of some components as part of the API. We won't be able to fix this until we've renamed all of the API names. e.g.

It will be a game changer, but one such game changer can be solved by antd-codemod.

Do you think this is worth doing?

I don't think that's a good idea.

Not a fan of codemod solution.
Just my point of view, but unfortunately, I believe that for most people it is more offensive than welcome.

Embedding components in custom components is common in React.

Please fix the problem and see that Ant design adoption is growing rapidly without a doubt.

Ant Design is very responsive and the first library that made me get out of the React bootstrap.

@ MacKentoch

It's difficult because some components use keys as part of the API. We won't be able to fix this until we've renamed all the names of the API.

@benjycui I understand.

In any case, it doesn't block.

Thank you for taking the time to reply.

@benjycui I have the one you suggested
I also think that's not a minor problem. When common components cannot be isolated, the same code must be repeated many times in an application. If the application is big I would consider not doing antd at all. Please consider this a constructive critic.
Thanks for your work!

I agree this is not a minor issue, and I wasn't expecting it when I started using the Ant design library. The best practices for custom components are used in all React projects. Personally, I really like Ant Design, but for some this could be a deal breaker. Would really like to see this improved in the upcoming Ant Design v3.

You can find a solution for this in version 3.

Can be fixed after this package is released (possibly).

I just came across this attempt (sorry if this is wrong) of creating a navigation bar using the menu and using React Router tags within the menu.

Is there a preferred solution?

In my opinion, this thread should be in the official docs as this issue is likely a deal breaker for many users.
The documents should also mention https://github.com/react-component/collapse/issues/73#issuecomment -323626120 as an alternative if no status is required.

I would definitely have appreciated mentioning this in the documentation! I tried to do something like this and wasted a lot of time because it doesn't work.

Whereby & the render.

Now that you can use react16 to return arrays of components from the rendering, it would be especially helpful to do so. Otherwise, it will be difficult to avoid duplicate code.

Any updates on that?

This is actually a big problem for us. I would vote to rename it as there is no workaround I can think of.

Same here - I need this for and.

I found a workaround that allows you to pass the rest of the props on from the packaged component.

If you're using the workaround, at least it doesn't work for me. In the end, the key property gets a value like that I can't work with. I would also vote for a name change on the properties.

This problem can actually drive me away from Antd ... or at least cause me to find a replacement for these components. It really limits your ability to create reusable components.

For anyone trying to use React Router in a menu. items @yunshuipiao had a successful solution that worked for me in # 6576

I thought I'd document this for those trying to collapse with a custom component To get going : Similar to

Same problem as @ncknuna.

Menu.Item are not selected when wrapping. Is there a workaround?

@Nomeyho Am The end is added by doing the relevant copied / pasted methods and the original check commented out and then passed the class as in my wrapper:

Is there a solution for this?

I am with @ChuckJonas I Agree

This problem can actually drive me away from Antd ... or at least cause me to find a replacement for these components. It really limits your ability to create reusable components.

I need to use Menu SubMenu and Menu.items like this:
Why? because I can use my "CustomSubMenu" elements on other pages ... this is an important part of "reusable" components.


and OtherFile.js as follows:

Temporary workaround (edited for simplicity) for submenus:

When dealing with arrays:

  • Passing on props
  • Include and that should be unique

A better approach would probably be:


Again, you probably don't want to use the index on the array, so don't use it in production, but the idea is solid.

  • 1 for the ability to embed Antd components in custom components. This is make or break for us

I think we have a way to get rid of the dependency on the key. Take the menu as an example, we can introduce a prop and then that to implement the menu. To maintain compatibility, the menu will continue to cycle through the child items and change those to if displayed. At the same time we can also use the semantics of props like.

@yesmeck to be honest ( but I

As far as I know, you could Responding to new ones use as a workaround?

That's great news

Yes, we have to instead of to solve the problem.

I think one solution is to not use React.Children.forEach and React.cloneElement to pass props and set new props. Use a function, for example for custom:

and antd select source also use sub-function props instead of "React.Children.forEach" and "React.cloneElement".

Sorry if this is a stupid question, but I'm still pretty new to React and Ant design.
Does this mean we can practically not use Ant design menus in a React-Redux connected SPA?
If so, how can you write a relatively complex SPA using Ant Design? Is there a workaround?

Is there any news about this?

Is there an update on this issue? The menu item behaves strangely with HOC.

Hello ! Again, I'm very interested in being able to customize this type of component.
Actually the problem with a custom

No workaround suggested in this thread helped me get it working. I have a working selection with empty options.

I started using CASL to render UI elements based on user permissions. However, I ran into the problem of SubMenus not rendering because the call to the isRootMenu function fails because the props are not properly passed to the children.

As a workaround, I defined the SubMenus as a constant and passed the props 'by hand':
`` ``
render () {

`` ``

This solution isn't very practical, but it will work for now. However, I still have the problem that the submenu title that contains an icon does not render correctly. The symbol is missing.

Does anyone have any idea how to fix this?

I created a shop window here: https://github.com/gibelium/meteor-react-antd-casl

Showcase for using the CASL authorization library in a Meteor / React environment using the Ant-Design-UI library - Gibelium / Meteor-React-Antd-Casl

@gibelium I think that is rendering of

@gotjoshua Wirst you create this particular problem?

Setting the advanced standard menu items does not work either. My workaround implementation is ignoring the property of Menu.

Any ideas how to solve this?

This problem really should be mentioned in the documents. I spent an entire working day investigating this bug only to understand that this library is unusable for me. Please, please, please put in a warning so other developers don't have to waste as much time figuring out that you used an anti-pattern redirecting on React buttons and now you are in for so many HOCs or decorators available to the community are very fragile.
It really is a shame. Hope you will fix it in your next major release.

Is there an update on this issue? Set menu defaultOpenKeys does not work

Totally something that should be considered a high priority really quickly. πŸ”₯

I have a similar use case that I (probably) cannot implement.
I want to create a Redux connected component that will render with options based on data in Redux memory. Since I don't want to "copy and paste" the same code everywhere I want this type of component in, but because of the use of HOC, I can't do it.

EDIT: I found the solution for my use case. I was able to create such a component as described above with the option as follows:

This solution is specific to HOC, but you should be able to create a similar solution using React.forwardRef.

In addition to previous comments - yes, I also think this could be considered a high priority. After successfully solving one of my problems (as detailed above), I now had to create a component wrapped with my custom component. I have a very common use case -> The wrapping component is used to check permissions. So if conditions are met, the child component is rendered; otherwise, it is not.

Is there a simple and working workaround for this?

Any updates on this please?

I found a workaround that allows you to pass the rest of the props on from the packaged component.

This indicates console warnings. How can this be fixed?
staticContext instead of staticcontext`. If you accidentally passed it from a parent component, remove it from the DOM element.

index.js: 1437 Warning: Invalid prop on value

  • Label. Either remove it from the element or pass in a string or numeric value to keep it in the DOM. Further information can be found at https://fb.me/react-attribute-behavior
    in li (created by MenuItem)
    in MenuItem (created by Connect (MenuItem))
    in Connect (MenuItem) (created by Context.Consumer)
    in trigger (created by Tooltip)
    in tooltip (created by Context.Consumer)
    in tooltip (created by Context.Consumer)
    in MenuItem (at FortKnox.js: 55)
    in _FortKnox (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in withRouter (Connect (_FortKnox)) (under PageSider / index.js: 114)
    in ul (created by DOMWrap)
    in DOMWrap (created by SubPopupMenu)
    in SubPopupMenu (created by Connect (SubPopupMenu))
    in Connect (SubPopupMenu) (created by Menu)
    in Provider (created by Menu)
  • same problem ... I want to create a permissions component as HOC to package Menu.Item, but antd doesn't allow this ... sad

    I've spent some time on this subject ...

    and it is doable πŸŽ‰, you just have to pass rest props to dh. Collapse.Panel (check rc-panel source code to understand)

    and then use it like this:

    It would be fantastic to see version 4.0 of this solution!

    This is an absolutely high priority.
    Literally renders these components unusable when special behaviors are required (sometimes even simple ones, such as authorization).
    For example, I'm trying to create a dynamically loaded menu, so I'm literally showing a disabled one with a spin box as a name until the data comes in.
    That is far from ideal.

    I've spent some time on this subject ...

    and it is doable πŸŽ‰, you just have to pass rest props to dh. Collapse.Panel (check rc-panel source code to understand)

    While it's a great solution (I really use it in my projects), you lose some features.
    Ie if you are not a direct child of, it will not work. 😞

    I just ran into this problem.

    Must be confirmed in the documentation in any case. It is very frustrating to run into this issue (along with a few other minor ones) that makes me seriously consider using AntDesign in my projects.

    I can't believe there isn't a solution to this yet.

    This really needs to be fixed. Most developers don't just use out-of-the-box components. This means that we may want to incorporate more functionality that cannot otherwise be added via the provided API. I wouldn't call HOCs an infrequent, low priority use case. It's fundamental to the makeup of React.

    Please fix this and include the information and the workarounds found here in your official documents while we fix it.

    Please fix this and include the information as well as the workarounds found here in your official documents during the fix.

    Maintainers are open to PR. You can also send a PR for a document update if you want and have the time.

    @ afc163

    I've spent some time on this subject ...

    and it is doable, you just have to pass rest props to dh. Collapse.Panel (check rc-panel source code to understand)

    and then use it like this:

    Can someone please explain what's going on below. Also try to include in a component.

    When I use this code:

    within :

    It doesn't work.

    But as soon as I use this instead:

    it starts to work.
    Can someone explain why?

    it starts to work.

    Can someone explain why?

    As far as I know, the parent collapse needs to set props other than header, key, and extra (from your non-working example). These props from the parent collapse must be explicitly inserted into the panel component of your custom component.

    I think you could use the React Inspector to learn all sorts of props that are changing and pass them one by one, but the ... prop syntax ensures that whatever the parents want to add to their child panel is attached will (including but not limited to those you need to explicitly set)

    This problem needs to be fixed.
    Many (or almost) developers want to use the custom component library.

    This code doesn't work. Because the menu and menu item need opaque props.

    @moonjoungyoung @adamerose