效果图
1.前期准备
搭建项目和初始化项目,详情看这篇文章的二、五
2.项目结构
只需要我圈红的这个
3.代码
Liuyanlan.js
// 1.导入
import React,{
Component} from 'react';
import './Liuyanlan.css'
class Liuyanlan extends Component{
constructor(props) {
super(props);
// 定义state
this.state={
}
}
// 删除数据
del(index,e){
let {
del}=this.props
del(index)
// 取消冒泡
e.stopPropagation()
}
// 改变状态
changeState(index){
let {
change}=this.props
change(index)
}
// 渲染
render(){
let {
arr,index}=this.props
return(
<li className={
arr.checked?'active':''} onClick={
this.changeState