Ant Design 4+ has not been used in the project since its release, and it is not easy to upgrade the version of the project. The official website seems to have little change, but in fact almost all components have been changed, and some components such as Form, Tree, Select, Table, etc. have been completely rewritten from V3 to V4

The new project has tried Antd4, which feels more simple and clear than before. Due to the slight changes of many components, the use of Antd4 is mainly based on documents, and it is basically solved normally until a problem is encountered ~~~~

Side menu Icon dynamically generated issuesOf course, it is also possible to write the Menu component of ANTD directly, but if there are many menus, it will be difficult to manage, so we will create a Menu array and traverse a waveThen the problem comes, v3 inside our Menu component is like this

<Icon type="pie" /> <Icon type="shop" /> <Icon type="time" />Copy the code

V4 look at the Menu component like thisIcon becomes an attribute of Menu, parameter is node, suddenly meng don’t know how to dynamically generate a lot of SAO operation at that time, but can not achieve… *** react.createElement () ****** didn’t remember the react original method *** **

React.createElement (node name, node property set, content set)

<h1 className="one">React.createElement</h1>
React.createElement("h1", {className: "one"}, "React.createElement")
Copy the code

React.createElement (icon_name)

It’s that simple, and it’s what we want

Learning is the process of learning and forgetting, blindly pursue new technology, forget the fundamental things, shouldn’t ah, record to remind yourself.