react实现togglelist

最新推荐文章于 2021-01-06 17:29:18 发布

渣渣前端

最新推荐文章于 2021-01-06 17:29:18 发布

阅读量691

点赞数

分类专栏：前端文章标签： react togglelist

本文链接：https://blog.csdn.net/dtbk123/article/details/90049881

版权

前端专栏收录该内容

74 篇文章 0 订阅

订阅专栏

//列表内容
const datalist = {
    "colleagues": {
        "name": "同事",
        "list": [
            {
                id: Math.random(),
                "name": "小明",
               
                
            },
            {
                id: Math.random(),
                "name": "心艾",
              
                
            },
            {
                id: Math.random(),
                "name": "乌拉",
                
                
            }
        ]
    },
    "netFriend": {
        "name": "网友",
        "list": [
            {
                id: Math.random(),
                "name": "周星弛",
                
                
            },
            {
                id: Math.random(),
                "name": "李连杰",
               
                
            }
        ]
    },
    "students": {
        "name": "基友",
        "list": [
            {
                id: Math.random(),
                "name": "jj",

            },
            {
                id: Math.random(),
                "name": "老王",
               
            },
            {
                id: Math.random(),
                "name": "大锤",
               
               
            }
        ]
    }
}

window.datalist=datalist;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    h2{width:600px;
       height:40px;
       margin:30px 30px;
       font-size:20px;
       background-color:cornflowerblue;
       line-height:40px;
    }
    li{width:600px;
       height:30px;
       background-color: crimson;
       margin-top:10px;
       margin-left:30px;
       list-style: none;
    }
    .list{width:600px;
          height:0;
          transition: 0.5s;
          overflow: hidden;
    }
    </style>

</head>
<body>
    <div id="app"></div>
    <script src="node_modules/babel-standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="./data.js"></script>
    <script type="text/babel">

class Name extends React.Component{
    constructor(){
        super(...arguments);
        this.state={data:this.props.data};
    }
    render(){
        return (
           <div>
            { this.state.data.map((item,index)=>{
                return (
                    <li key={index}>{item.name}</li>
                
                    )
            }
            )
        }</div>)
    }
}
class List extends React.Component{
 constructor(){
     super(...arguments);
     this.state={data:this.props.list,
                arr:this.props.arr
                
    }
 }
//是否更新组件
 shouldComponentUpdate(nextprops,nextstate){
    console.log(nextprops,nextstate);
    if( this.state.arr != nextprops.arr ){
                    this.setState({
                        arr:nextprops.arr
                    })
                }
                if( this.state.arr != nextstate.arr ){
                    this.toggleList(nextstate.arr)
                }
                return true
            }

 componentDidMount(){
     this.toggleList(this.state.arr)
 }
 toggleList = (onOff)=>{
                const ele = this.refs.list
                if( onOff ) ele.style.height = ele.scrollHeight + 'px'
                else ele.style.height = 0

               
            }
 render(){
    return(<div className='list' ref='list'>
            <Name data={this.state.data}/>
            </div>
       
    )
 }
}
    class Content extends React.Component{
        constructor(){
            super(...arguments);
            this.state={data:datalist,
                        arr:[false,false,false]
            }
        }
//点击哪个哪个列表展开
        handleClick(index){
           
            const arr=this.state.arr;
            for(var i=0;i<arr.length;i++){
                arr[i]=false;
            }
            arr[index]=true;
            this.setState({arr})
            
        }
       
        render(){
            return(
                <div>
                    {Object.keys(datalist).map((item,index)=>{
                        return(
                            <div key={index}>
                                <h2 key={index} onClick={this.handleClick.bind(this,index)}>{datalist[item]['name']}</h2> 
                                <List arr={this.state.arr[index]} list={datalist[item]['list']}/>
                            </div>
                        )
                    })}
                   
                    </div>
                    
            )
        }
    }
    ReactDOM.render(<Content />,document.getElementById("app"))
    
    </script>
    </body>
    
    </html>

渣渣前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react实现togglelist

//列表内容const datalist = { "colleagues": { "name": "同事", "list": [ { id: Math.random(), "name": "小明", ...
复制链接

扫一扫