浅谈react hook （父子传参）

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

//1.父子间传参

class Son extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

        }

      }

    componentDidMount() {

        

    }

    // 二，子传父 以回调函数的方式传递

    handelClick(i){

        console.log(i);

        this.props.deleItem(i)

    }

    render() {

        let {data}=this.props

        return (

            <div>

                <ul>

                    {data.map((item,index)=>{

                        return (

                            <li key={index}>{index+1}{item} <button onClick={()=>{

                                this.handelClick(index)

                            }}>删除</button></li>

                        )

 

                    })}

                </ul>

                <div>当前{data.length}条</div>

               

            </div>

               

      )

    }

    

}

 

class App extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            list:['大西瓜','大香蕉','大萝卜','大白菜']

        }

      }

    componentDidMount() {

        

    }

    dels=(index)=>{

        let data= this.state.list

        data.splice(index,1)

        this.setState({data})

    }

    render() {

        return (

            <div>

                {/*一， 父传子  data={this.state.list} 以属性的方式传递 */}

               <Son   deleItem={this.dels} data={this.state.list}></Son>

            </div>

               

      )

    }

    

}

// 三，渲染组件（和无状态类似）

ReactDOM.render(<App />, document.getElementById("root"));