React---留言栏

效果图

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