//父组件
import React, {Component} from 'react';
import {Todo} from './index.js'
import Zitodo from './zitodo'
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
arr: [true, false, false]
}
}
handleChange = (i) => {
const arr = this.state.arr.map((item, index) => {
if (index === i) return true;
return false
});
this.setState({
arr
});
// console.log(arr)
};
render() {
const data = Todo;
// console.log(data)
return (
<div>
{
//将对象返回成数组
Object.keys(data).map((item, index) => {
return (
{/* 子组件将父组件需要的内容传入*/}
<Zitodo
key={index}
{...data[item]}
show={this.state.arr[index]}
change={this.handleChange}
index={index}
/>
)
})
}
</div>
)
}
}
export default TodoList;
//子组件
import React, {Component} from 'react';
class Zitodo extends Component {
constructor(props) {
super(props);
//console.log(props); //查看父组件传过来的内容是否成功
this.state = {
onOff: this.props.show
}
}
shouldComponentUpdate(nextProps, nextState) {
if (this.state.onOff !== nextProps.show) {
this.setState({
onOff: nextProps.show
})
}
return true
}
handleClick = () => {
const onOff = !this.state.onOff;
this.props.change(this.props.index);
this.setState({
onOff
});
//console.log(onOff)
};
render() {
const {floor, random} = Math;
const color = (a, b) => {
return floor(random() * (b - a + 1) + a)
};
const {name, list} = this.props;
return (
<div style={{width: '200px'}}>
<h2 style={{background: 'green'}}
onClick={this.handleClick}
>
{name}</h2>
{/* 返回对象属性的name值*/}
{
this.state.onOff && (
<ol style={{background: 'pink'}}>
{
list && list.map((item, index) => {
return (
<li style={{background: `rgba(${color(0, 255)},${color(0, 255)},${color(0, 255)},.5)`}}
key={index}>
<p>{item.id}</p>
<p>{item.name}</p>
<p>{item.age}</p>
</li>
)
})
}
</ol>
)
}
</div>
);
}
}
export default Zitodo;
此内容仅供本人做笔记使用
网友评论