create-react-app hook 父子组件传值

如图，需求是，用hook 实现点击  add+  按钮，就添加下面的子组件，点击删除的时候，就删除对应的子组件

思路：

1.父组件传值到子组件，直接父组件用 props 传参，子组件用 props 接受就可以了，我这里用的name，也可以换成 bannar

{
    list.map((good, index) =>
        <Item key={index} name={good.name} filterHandle={filterHandle} />
    )
}

子组件

import React from 'react';

// 这里要记得接收，要不不会显示
function Item(props) {
    return (
        <div>
            <button onClick={deleteItem}>刪除</button>
            {/* 这里直接用props.属性名接受就可以了 */}
            <span>{props.name}</span>
        </div>
    )
}
export default Item;

2.子组件里删除数据

父组件

<Item index={index} name={item.name} deleteHandle={deleteHandle}/>

    //这里就是删除的方法，子组件里面会调用的
    const deleteHandle = (val) => {
        let arr = list
        arr.splice(arr.findIndex(item => item.name === val), 1)
        setList(
            [...arr]
        );
    }

子组件

<button onClick={deleteItem}>刪除</button>
<span>{props.name}</span>

//这个 deleteHandle 方法，和父组件里的 deleteHandle 方法是对应的
const { deleteHandle } = props;
const deleteItem = (event) => {
    deleteHandle(props.name)  
}

才疏学浅，如有不足，欢迎指出 ，不胜感激 (•̀ᴗ•́)و ̑̑