React列表删除效果

想要实现列表删除效果，需要用到父传子以及子传父，下面进行详解

首先定义两个组件

import React from "react";
function List (){
    return
}


class App extends React.Component{
    render (){
        return <div></div>
    }
}
export default App

在父组件中定义状态，并在子组件中写出相应的模板 

import React from "react";
function List (){
    return <>
            <h3>name</h3>
            <button>删除</button>
        </>
}


class App extends React.Component{
    state={
         list：[
                {id:1 , name:'1号'}
                {id:2 , name:'2号'}
                {id:3 , name:'3号'}
                ]
        }
    render (){
        return <div></div>
    }
}
export default App

然后进行组件通信，将数据互传 

import React from "react";
//解构
function List ({ascription, delList}){
            //这里因为jsx语法中必须拥有父级，所以使用幽灵块
    return <>
            <h3>ascription.name</h3>
            //绑定事件
            <button onClick={() => delList(ascription.id)>删除</button>
        </>
}


class App extends React.Component{
    delList = (id) => {
        console.log(id)
        this.setState({
            // filter作为过滤器，判断id与ascription.id是否相等，如果不等则保留
            list:this.state.list.filter(ascription => ascription.id !== id)
        })
    }
    state={
         list:[
                {id:1 , name:'1号'}
                {id:2 , name:'2号'}
                {id:3 , name:'3号'}
                ]
        }
    render (){
        return <div>
                //使用map方法遍历
                {this.state.list.map(ascription =><List key={ascription.id} ascription={ascription} delList={this.delList} />)}
            </div>
    }
}
export default App