react 手写树形渲染组件

自夏

已于 2024-05-12 17:50:03 修改

阅读量278

点赞数 3

分类专栏： React 文章标签： react.js javascript 前端

于 2024-05-12 17:49:04 首次发布

本文链接：https://blog.csdn.net/qq_39970857/article/details/138761569

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
css


.tree {
  width: 100vw;
  text-align: left;
  position: relative;

}

.tree-item {
  height: 45px;
  line-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.tree-item-onOff {
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: contents;
}

.tree-item-onOff image {
  width: 9px;
  height: 5px;
  display: block;
  transition: 0.4s;
}

.tree-item-onOff-closed {
  transform: rotate(-90deg);
}

.tree-item-onOff-open {
  transform: rotate(0deg);
}

.tree-item-name {
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.name {
  /* width: calc(100% - 50px); */
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img image {
  width: 15px;
  height: 10px;
  display: block;
}

.tree-item-name-select {
  background: #ECF7FA;
  color: #0079FE;
}

.tree-item-name-select2 {
  color: #0079FE;
}

.img-yuan {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #0079FE;
  right: 30px;
  position: absolute;
}

.img-yuan-Choice{
  background:  #0079FE;
}

import React from 'react';
import Tree from './Tree '
 const Index = () =>{


     const [treeData2, setTreeData] = React.useState(  [
         {
             name: 'node1',
             id: 1,
             children: [
                 { name: 'node1-1', id: 3 },
                 {
                     name: 'node1-2',
                     id: 4,
                     children: [
                         { name: 'node1-2-1', id: 5 },
                         { name: 'node1-2-2', id: 6 },
                         {
                             name: 'node1-2',
                             id: 4,
                             children: [
                                 { name: 'node1-2-1', id: 5 },
                                 { name: 'node1-2-2', id: 6 },
                             ],
                         },
                     ],
                 },
                 {
                     name: 'node1-2',
                     id: 4,
                     children: [
                         { name: 'node1-2-1', id: 5 },
                         { name: 'node1-2-2', id: 6 },
                         {
                             name: 'node1-2',
                             id: 4,
                             children: [
                                 { name: 'node1-2-1', id: 5 },
                                 { name: 'node1-2-2', id: 6 },
                             ],
                         },
                     ],
                 },
             ],
         },
         { name: 'node2', id: 2 },
     ]);
     const handleEventFromChild = (eventData) => {
         const treeData = [...treeData2];

         // 取消所有选中
         const chooseToCancel =(data)=> {
             // 遍历数组
             data.forEach((item) => {
                 // 如果当前项有children属性
                 if (item.children && Array.isArray(item.children)) {
                     item.selectItem = false
                     // 对当前项的children递归调用此函数
                     chooseToCancel(item.children);
                 }else{
                     item.selectItem = false
                 }
             });
         }
         chooseToCancel(treeData);


         // 选中点击这个
         const choiceItem = (data) => {
             // 遍历数组
             data.forEach((item) => {
                 if (item.children && Array.isArray(item.children)) {
                     if(item.id === eventData.id){
                         item.selectItem = true
                     }
                     // 对当前项的children递归调用此函数
                     choiceItem(item.children);
                 }else{
                     console.log(item.id,'item.id2222')
                     if(item.id === eventData.id){
                         item.selectItem = true
                     }
                 }
             });
         }
         choiceItem(treeData);

         setTreeData(()=>[...treeData])
         // 在这里处理从递归组件传递上来的事件数据
     };

     // 点击节点展开
     const clickOpenItem = (eventData) =>{
         const treeData = [...treeData2];
         // 递归节点展开
         const openItem =(data) => {
             // 遍历数组
             data.forEach((item) => {
                 if (item.children && Array.isArray(item.children)) {
                     if(item.id === eventData.id){
                         item.open = !item.open
                     }
                     // 对当前项的children递归调用此函数
                     openItem(item.children);
                 }else{
                     if(item.id === eventData.id){
                         item.open = !item.open
                     }
                 }

             });
         }
         openItem(treeData);

         setTreeData(()=>[...treeData])
     }

    return (
        <div style={{width: '100%', height: '50vh',overflow: 'auto'}}>
                <Tree treeData={treeData2} level={1} onEvent={handleEventFromChild} onOpenItem={clickOpenItem}/>
        </div>
    )

}
export default Index

树形组件 Tree.js

import React from 'react';

const Treediv = props => {
  const { treeData, level = 0,onEvent,onOpenItem } = props

  // 选中当前
  const handleClick = (eventData) => {
    // 处理事件逻辑...
    onEvent(eventData); // 通过回调将事件数据传递给父组件
  };

  // 展开节点事件
  const handleOpenItem = (eventData) => {
    // 处理事件逻辑...
    onOpenItem(eventData); // 通过回调将事件数据传递给父组件
  };

  const [selectKey, setSelectKey] = React.useState('');


  const jsw = (w, d) => {
    return (w - 2) * d;
  };

  return (
      treeData.map((itemTree, indexItem) => (
      <div
        className="tree"
        key={itemTree.id}
        style={{
          width: `calc(100vw - ${
            level >= 3 ? level * 10 + jsw(level, 10) : level * 10
          }px)`,
          paddingLeft: `${level * 10}px`,
        }}
      >
        <div className="tree-item tree-item-select">
          {itemTree.children && itemTree.children.length > 0 ? (
            <div
              className="tree-item-onOff"
              onClick={() => {
                handleOpenItem(itemTree)
              }}
            >
              {itemTree.open}
              <img
                src={new URL('./assets/u1490.svg', import.meta.url).href}
                className={
                  itemTree.open
                    ? 'tree-item-onOff-open'
                    : 'tree-item-onOff-closed'
                }
              />
            </div>
          ) : (
            <div className="tree-item-onOff"></div>
          )}

          <div
            className={`tree-item-name ${
              selectKey == itemTree.id ? 'tree-item-name-select' : ''
            }`}
            style={{
              width: `calc(100vw - ${level * 10}px)`,
              paddingRight: `${level >= 3 ? level * 10 + jsw(level, 10) : level * 10}px`,
            }}
            onClick={() =>{
              handleClick(itemTree)
            } }
          >
            <div className="name">{itemTree.name}</div>
            <div className={`img-yuan ${ itemTree.selectItem && "img-yuan-Choice"}`}
                 style={{
                   marginRight: `${ level * 10}px`,
                 }}
            >
              {itemTree.selectItem}
              {/* <img src="./assets/icon/u435.svg" /> */}
            </div>
          </div>
        </div>
        {itemTree.children && itemTree.open && itemTree.children.length > 0 && (
          <Treediv treeData={itemTree.children} level={level + 1} onEvent={onEvent}  onOpenItem={onOpenItem}/>
        )}
      </div>
    ))
  );
};
export default Treediv

svg 三角形

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>