【React+Taro】手动开发的树组件Tree

Tree.js

javascript 复制代码
import Taro, { useState } from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';
import './Tree.scss';

const TreeNode = ({ node, onSelect, onExpand }) => {
  const handleNodeClick = () => {
    onSelect && onSelect(node.id);
  };

  const handleExpandClick = () => {
    onExpand && onExpand(node.id);
  };

  return (
    <View className="tree-node">
      <Text className="title" onClick={handleNodeClick}>
        {node.title}
      </Text>
      {node.children && node.children.length > 0 && (
        <Button className="expand-btn" onClick={handleExpandClick}>
          {node.expanded ? '-' : '+'}
        </Button>
      )}
      {node.expanded && node.children && node.children.length > 0 && (
        <View className="children">
          {node.children.map((child) => (
            <TreeNode
              key={child.id}
              node={child}
              onSelect={onSelect}
              onExpand={onExpand}
            />
          ))}
        </View>
      )}
    </View>
  );
};

const Tree = () => {
  const [treeData, setTreeData] = useState([
    {
      id: '1',
      title: 'Node 1',
      children: [
        {
          id: '1-1',
          title: 'Node 1-1',
          children: [
            {
              id: '1-1-1',
              title: 'Node 1-1-1',
              children: [
                { id: '1-1-1-1', title: 'Node 1-1-1-1', children: [] },
                { id: '1-1-1-2', title: 'Node 1-1-1-2', children: [] },
              ],
            },
            {
              id: '1-1-2',
              title: 'Node 1-1-2',
              children: [],
            },
          ],
        },
        {
          id: '1-2',
          title: 'Node 1-2',
          children: [
            {
              id: '1-2-1',
              title: 'Node 1-2-1',
              children: [],
            },
            {
              id: '1-2-2',
              title: 'Node 1-2-2',
              children: [],
            },
          ],
        },
      ],
    },
  ]);

  const handleNodeSelect = (id) => {
    console.log('Selected Node:', id);
  };

  const handleNodeExpand = (id) => {
    setTreeData((prevTreeData) => {
      return toggleNodeExpanded(prevTreeData, id);
    });
  };

  const toggleNodeExpanded = (data, id) => {
    return data.map((node) => {
      if (node.id === id) {
        return {
          ...node,
          expanded: !node.expanded,
        };
      } else if (node.children && node.children.length > 0) {
        return {
          ...node,
          children: toggleNodeExpanded(node.children, id),
        };
      }
      return node;
    });
  };

  return (
    <View className="tree">
      {treeData.map((node) => (
        <TreeNode
          key={node.id}
          node={node}
          onSelect={handleNodeSelect}
          onExpand={handleNodeExpand}
        />
      ))}
    </View>
  );
};

export default Tree;

Tree.scss

javascript 复制代码
.tree {
  .tree-node {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .title {
      flex-grow: 1;
      cursor: pointer;
    }

    .expand-btn {
      width: 20px;
      height: 20px;
      line-height: 20px;
      margin-left: 5px;
      font-size: 16px;
    }

    &.children {
      margin-left: 10px;
    }
  }
}

引用Tree.js的主页面index.js

javascript 复制代码
import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import Tree from '../../components/Tree';

class Index extends Component {
  config = {
    navigationBarTitleText: '首页',
  };

  render() {
    return (
      <View>
        <Tree />
      </View>
    );
  }
}

export default Index;

具体的样式大家可以根据需求手动调整。

相关推荐
东东23319 分钟前
前端规范工具之husky与lint-staged
前端·javascript·eslint
岁月宁静44 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
atwednesday1 小时前
日志处理
javascript
#做一个清醒的人1 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪1 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
rit84324992 小时前
ES6 箭头函数:告别 `this` 的困扰
开发语言·javascript·es6
摸鱼的春哥2 小时前
【编程】是什么编程思想,让老板对小伙怒飙英文?Are you OK?
前端·javascript·后端
webxin6662 小时前
页面动画和延迟加载动画的实现
前端·javascript
duandashuaige3 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
今天头发还在吗3 小时前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design