//列表内容
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>