重构-树形结构(左侧多级菜单)

曾经终败给现在 2021-07-24 22:45 497阅读 0赞

实现多级展示:
    	递归组件
    
    实现点击显示/隐藏子菜单:
    	利用js对象特性,无属性也可以添加,即每个属性添加个flag,用来控制是否显示当前标签的子标签
    	即点击当前标签，给渲染数据的对象添加flag,决定子标签是否显示
    
    传递参数结构:
    [{label:'标签名',children:[{label:'子标名'}]}]
    
    缺陷:
    	高度未知,使用max-height做过渡,会有延迟

效果图:  
![在这里插入图片描述][2020121017083874.png]  
![在这里插入图片描述][20201210170848483.png]  
代码示例:  
使用:

import React,{ useState} from 'react'
    import Tree from './tree/tree'
    
    const data=[{ 
      label: '一级 1',
      children: [{ 
        label: '二级 1-1',
        children: [{ 
          label: '三级 1-1-1'
        }]
      }]
    },
      { 
        label: '一级 2',
        
      children: [{ 
        label: '二级 2-1',
        children: [{ 
          label: '三级 2-1-1'
        }]
      }, { 
        label: '二级 2-2',
        children: [{ 
          label: '三级 2-2-1'
        }]
      }]
    }, { 
      label: '一级 3',
      
      children: [{ 
        label: '二级 3-1',
        children: [{ 
          label: '三级 3-1-1'
        }]
      }, { 
        label: '二级 3-2',
        children: [{ 
          label: '三级 3-2-1'
        }]
      }]
      }
    ]
    
    function App(){ 
    
      return(
    
        <div>
          <Tree data={ data}></Tree>
        </div>
      )
    }
    
    export default App

tree容器.jsx:

import React, {  useState,useCallback,useMemo,useRef,useEffect } from 'react'
    import PropTypes from 'prop-types';
    import TreeItem from './treeItem/treeItem'
    import './tree.css'
    
    function App(props){ 
    
      let [data, setData] = useState([]);
    
      useEffect(() => { 
        setData(props.data)
        
      },[props.data])
      
    
      return(
    
        <div className='jf-tree-container'>
          <div>
            <TreeItem data={ data} itemHeight={ props.itemHeight}></TreeItem>
          </div>
        </div>
      )
    }
    
    App.propTypes = { 
      data: PropTypes.array,
      itemHeight:PropTypes.string
    }
    
    App.defaultProps = { 
      data: [],
      depIndex: 0,
      itemHeight:'40px'
    }
    
    // memo
    export default App;

tree容器.css:

.jf-tree-container { 
      display: inline-block;
      box-sizing: border-box;
      background-color: var(--backgroundColor);
      width: var(--width);
      height: var(--height);
      overflow-x: hidden;
      overflow-y: auto;
    
      --width: 200px;
      --height: 400px;
      --backgroundColor: #409eff;
      --hoverColor: #eee;
    }

treeItem.jsx:

import React, {  useState,useCallback,useMemo,useRef,useEffect } from 'react'
    import PropTypes from 'prop-types';
    import './treeItem.css'
    
    function App(props){ 
    
      let [data, setData] = useState([]);
      const treeItemf = useRef(null);
      const [height, setHeight] = useState(0);
        
      useEffect(() => { 
        setData(props.data)
    
        
      },[props.data])
      
    
      const _onClick = function (index,e)
      { 
        //利用js对象特性,无属性也可以添加,即加上每个属性都有个flag,用来控制是否显示当前标签的子标签
        if (data[index].children)
        { 
          data[index].flag = !data[index].flag;
          setData([...data]);
        }
      }
    
      return(
    
        <div >
          <div>
    
            { 
              data.map((item, indexOne) => { 
                
                return (
                  <div key={ item + indexOne} className='jf-tree-item'>
                    { <span style={ {  paddingLeft: props.depIndex * 10 + 'px' }} onClick={ (e) => _onClick(indexOne, e)} className={ `jf-tree-label`}>{ item.label}</span>}
                    <div className={ `jf-tree-item-children ${ item.flag&&'show'}` }>
                      { 
                        
                        item.children && <App itemHeight={ props.itemHeight} data={ item.children} depIndex={ props.depIndex + 1}></App>
                        
                        
                      }
                     </div>
                  </div>
                )
              })
            }
          </div>
        </div>
      )
    }
    
    App.propTypes = { 
      data: PropTypes.array,
      
    }
    
    App.defaultProps = { 
      data: [],
      depIndex:0
    }
    
    // memo
    export default React.memo(App);

treeItem.css:

.jf-tree-item { 
      /* display: inline-block; */
      box-sizing: border-box;
      overflow: hidden;
    
      --hoverColor: #eee;
      --childrenColor: skyblue;
      --childrenHeight: 0;
    }
    
    .jf-tree-label { 
      cursor: pointer;
      display: inline-block;
      width: 100%;
      height: 40px;
      color: white;
      line-height: 40px;
      overflow: hidden;
    }
    
    .jf-tree-item-children { 
      background-color: var(--childrenColor);
      max-height: 0;
      transition: max-height 0.5s;
    }
    
    .show { 
      max-height: 400px;
    }
    
    .jf-tree-label:hover { 
      background-color: var(--hoverColor);
    }

[2020121017083874.png]: /images/20210724/56f0e05572314bf2923b30a0dd77b2a5.png
[20201210170848483.png]: /images/20210724/db9bbf9f4f9d47ce9f3e36e0e38a8961.png