muliminty note

React 目录树控件

6分钟阅读

如果你追求动画效果较好的 React 目录树控件，以下几个库不仅功能丰富，而且支持平滑动画效果，能够提升用户体验。动画效果好看且流畅的目录树能够让用户在操作时感受到细腻的交互体验。

1. react-motion

虽然 react-motion 不是专门的目录树控件，但它是一个轻量且强大的动画库，可以与任何树形结构控件组合使用，为树形节点的展开/折叠等操作添加平滑的动画效果。

组合示例代码：

你可以结合 react-simple-tree-menu 和 react-motion，实现有动画效果的目录树。

安装：

npm install react-motion react-simple-tree-menu

示例代码：

import React from 'react';
import TreeMenu from 'react-simple-tree-menu';
import { Motion, spring } from 'react-motion';
import 'react-simple-tree-menu/dist/main.css';
 
const AnimatedTreeMenu = () => {
  const treeData = [
    {
      key: 'root',
      label: 'Root',
      nodes: [
        {
          key: 'node-1',
          label: 'Node 1',
          nodes: [
            { key: 'child-1', label: 'Child 1' },
            { key: 'child-2', label: 'Child 2' }
          ]
        },
        { key: 'node-2', label: 'Node 2' }
      ]
    }
  ];
 
  return (
    <TreeMenu
      data={treeData}
      onClickItem={({ key, label, ...props }) => {
        console.log('Clicked item:', key, label);
      }}
    >
      {({ search, items }) => (
        <>
          {items.map(({ key, label, ...props }) => (
            <Motion key={key} defaultStyle={{ height: 0 }} style={{ height: spring(100) }}>
              {interpolatingStyle => (
                <div style={{ overflow: 'hidden', ...interpolatingStyle }}>
                  {label}
                </div>
              )}
            </Motion>
          ))}
        </>
      )}
    </TreeMenu>
  );
};
 
export default AnimatedTreeMenu;

通过 react-motion，你可以为树形控件的展开/折叠添加平滑的动画效果，增强用户的视觉体验。

2. react-spring

react-spring 是一个现代化的动画库，非常适合在 React 中实现流畅的动画效果。你可以利用它给树节点的展开和折叠添加弹性动画效果。

示例代码：

安装：

npm install react-spring react-treebeard

结合 react-treebeard：

import React, { useState } from 'react';
import { Treebeard } from 'react-treebeard';
import { useSpring, animated } from 'react-spring';
 
const AnimatedTreebeard = () => {
  const [data, setData] = useState({
    name: 'root',
    toggled: true,
    children: [
      {
        name: 'parent',
        children: [{ name: 'child1' }, { name: 'child2' }]
      },
      {
        name: 'parent 2',
        children: [{ name: 'child3' }, { name: 'child4' }]
      }
    ]
  });
 
  const AnimatedNode = ({ node }) => {
    const style = useSpring({
      to: { height: node.toggled ? 'auto' : '0px' },
      from: { height: '0px' }
    });
 
    return (
      <animated.div style={style}>
        {node.children && node.children.map(child => (
          <div key={child.name}>{child.name}</div>
        ))}
      </animated.div>
    );
  };
 
  const onToggle = (node, toggled) => {
    node.toggled = toggled;
    setData(Object.assign({}, data));
  };
 
  return <Treebeard data={data} onToggle={onToggle} decorators={{ Header: AnimatedNode }} />;
};
 
export default AnimatedTreebeard;

在此示例中，react-spring 用于对树节点的展开/折叠进行过渡动画，从而使目录树的交互变得更为流畅和吸引人。

3. rc-tree + CSS 动画

如果你使用 rc-tree，它自带较为基础的动画效果，并且可以通过 CSS 进行自定义，制作出更具视觉吸引力的交互。

安装：

npm install rc-tree

示例代码：

import React from 'react';
import Tree from 'rc-tree';
import 'rc-tree/assets/index.css';
import './myTree.css';  // 引入自定义的 CSS 动画
 
const MyTree = () => {
  const treeData = [
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        { title: 'child 1', key: '0-0-0' },
        { title: 'child 2', key: '0-0-1' }
      ]
    }
  ];
 
  return (
    <Tree
      treeData={treeData}
      showLine
      defaultExpandAll
      motion={{
        motionName: 'node-motion',
        motionAppear: true,
        onEnterActive: node => node.style.transition = 'all 0.5s ease',
        onLeaveActive: node => node.style.transition = 'all 0.5s ease',
      }}
    />
  );
};
 
export default MyTree;

CSS 动画：

.node-motion-enter-active,
.node-motion-leave-active {
  transition: max-height 0.3s ease-out;
}
 
.node-motion-enter {
  max-height: 0;
}
 
.node-motion-enter-active {
  max-height: 100px;
}
 
.node-motion-leave-active {
  max-height: 0;
}

通过自定义 CSS 动画，你可以为树形控件添加任意的动画效果，比如展开/折叠的高度变化、透明度渐变等。

4. react-animated-tree

react-animated-tree 是一个带有内置动画的轻量树组件，开箱即用，效果流畅自然。它的重点就是为你提供默认的动画效果，因此你不需要额外配置。

安装：

npm install react-animated-tree

示例代码：

import React from 'react';
import AnimatedTree from 'react-animated-tree';
 
const MyTree = () => (
  <div>
    <AnimatedTree content="Main Node" type="folder" open style={{ fontSize: '20px' }}>
      <AnimatedTree content="Child Node 1" />
      <AnimatedTree content="Child Node 2" />
    </AnimatedTree>
  </div>
);
 
export default MyTree;

特点：

  • 提供内置的展开/折叠动画
  • 支持自定义节点样式
  • 使用非常简单，适合想要快速实现动画效果的场景

总结

如果你追求动画效果好看、流畅的目录树控件，可以考虑：

  • react-motion 或 react-spring：它们可以与任何树形结构结合，提供强大的动画效果控制，适合复杂场景。
  • rc-tree：结合自定义 CSS 动画，你可以创建出符合自己需求的树形交互效果。
  • react-animated-tree：如果你需要开箱即用的动画效果，它是一个轻量且自带动画的目录树控件。

根据项目的需求选择适合的控件和动画库，可以帮助你构建具有良好视觉体验的交互效果。

关系图谱