Encountered this problem, first or search, search the relevant official issues, the following link:

The tree control tree requires an adjustable child node that can be arranged vertically or horizontally

In 2017, someone mentioned the need to support horizontal arrangement, because if the tree was vertical, it would be very long if there were too many data.

At that time, it seems that this problem was not solved. I also looked at the previous version of ANTD and found that there was no such configuration item, but I did find the relevant implementation method, as shown in the following link:

Modify the ANTD Tree components so that they are aligned horizontally

With this in mind, I also planned to operate on the latest version of ANTD, but found that the DOM structure has changed, unlike the previous ul Li structure, the bottom child nodes do not have wrapped elements, each is a separate div.

How to gao?

What the hell is going on?

.

Start looking for

So, two days of experimenting, for example, came across this blog:

React+Ant Design+Tree

DFS and BFS

I also thought that it would be possible to customize the render tree, and I made a sketch to use some algorithms, as shown below:

ReactNode must be nested, so BFS is not good enough for tree structure. It still feels like recursion. DFS comes to mind, but this traversal is different, so I drew another sketch:

It feels like BFS meets DFS, right?

So I still have to determine if the current node has a child, recurse if it does, and display the current node as well, so I have the following approximate pseudocode, the core is this, also using the previous antd@3 method, take out the TreeNode, However, there is a warning against using the console after antd@4, and treeData is recommended.

import { Tree } from 'antd';
const { TreeNode } = Tree;

// const data = [...] ;

// Core part
const renderTree = (data: any) = > {
    if (data && data.length && data[0].children) {
        return data.map((item: any) = > {
            return (
                <TreeNode title={item.title} key={item.key}>
                    {item.children && renderTree(item.children)}
                </TreeNode>
            );
        });
    } else {
        return (
            <TreeNode>
                {data.map((item: any) => {
                    return (
                        <TreeNode
                            title={item.title}
                            key={item.key}
                            className={s.treeNodeChild}
                        ></TreeNode>
                    );
                })}
            </TreeNode>); }};const Test = () = > {
    return (
        <Tree>
            {renderTree(data)}
        </Tree>)}export xxx;
Copy the code

I thought this was the perfect solution, and it was clear at the time, to determine the situation where there were no child nodes. At that point, I could get all the child nodes of the previous node, wrap them in a div, and add a Flex to that div.

But!!!!

If you wrap a Div around a TreeNode, it doesn’t work…

The child nodes would not render, including the div, and after several attempts failed, the scheme was abandoned.

Install both versions

This came to me on a whim. I thought that since antd@3 could solve the horizontal alignment problem by using styles in the past, could I install two ANTD versions to solve the problem? At that time, I found this blog, the link is as follows:

NPM installs two versions of the same package

I tried it in CodesandBox, there was a style problem, after all, the dom structure of the current version and the previous version is different, so if the global import antd@4 style, for my antd@3 version is not good.

I also found this blog post:

Install two different ANTD versions and change the ANTD style prefix

At that time, I still felt a little trouble to change the prefix, so I gave up this method. After all, it is not good to coexist two versions of components. After all, I am not upgrading the old version, and my new version continues to be compatible with the old one.

Custom render node

Later, I went through the documentation and basically read every field. Later, I found titleRender configuration item, so I looked up some usage and found a blog sample as follows:

How does antD’s tree control render a particular node’s style?

TitleRender Custom Render Node (nodeData) => ReactNode

However, this does not seem to solve my problem, I want to include all the child nodes without children together, and then add a style, this traversal of each node, maybe I did not use the right way, after a while, but still failed to figure out so I gave up this method.

Looking for NPM package

I think there should be people with the same needs as me, so I went to NPM to search for some antD tree, AND I installed some, but it seems that the problem has not been solved, do I really need to write one by myself?

No, no, no, no, no.

Trying to update the UI

During this period, I checked whether The Material – UI and ANTD-Pro are ok, but the style of Material – UI is still a little different from that in China, and the prototype of the product is based on ANTD, with checkbox, and some selections and partial selections. There’s no material- UI, so I’m not going to consider it.

At that time, I suddenly thought of VUE, and I had used Element-UI when I was studying VUE. Boy, I immediately opened the official website and searched Tree. Boy, boy, there was not much difference in UI style.

I went back to F12 to see what the elements looked like, and changed the style on the browser side first. I found it worked!

Now that I’m thinking of co-existing two versions of the UI, what’s the big deal? (Escape)

However, in order to meet this particular requirement, we had to compromise and add two UI libraries, which is fine. Don’t worry about styling. The Elemental-UI style prefix will have an EL.

React: Vue reacts to the React element. React: Vue reacts to the React element.

element-ui-tree-demo

The implementation effect is as follows:

Sort of solved the problem.

conclusion

I don’t know, eventually it came out, it wasn’t stuck in the problem, but maybe it wasn’t a better solution, right?

As for the process of reconstructing the original render structure during the big version switch, I’m not sure what the ul Li structure is going to be all divs for. Performance? I seem to have seen it somewhere in the official document before, but now that it has been changed, this business requirement is solved for the time being.

In this record their own solution, after all, have changed the UI library, I do not know if you have a better solution, willing to discuss together.

Learning is like rowing upstream; not to advance is to drop back.