react hooks组件间的传值方式(使用ts),子孙传值给祖先组件

父子组件传值

参考：react hooks组件传值

• 父传子很简单，只要父组件传参，子组件写好interface childProps和props去接收即可

• 子传父稍复杂

父组件写一个回调函数：

changeTaskState={(id: any) => { changeTaskStateByID(id) }}

当然这个 changeTaskStateByID我们需要先定义好，id是在子组件返回的一个东西：

const changeTaskStateByID = (id: any) => {
        let changedState = id[1]
        let changedTableList: any = []
        // 数组深拷贝
        changedTableList = JSON.parse(JSON.stringify(tableList))

        let states = ['', '待处理', '已打码', '完成', '异常', '废弃']
        console.log('zichuanfu', id);
        let id_list = id[0]
        let length = id[0]?.length
        console.log('length', length);


        for (let i = 0; i < length; i++) {
            changedTableList.forEach((element: any) => {
                if (element.task_id == id_list[i]) {
                    console.log('有这个id', id_list[i], '修改为', states[changedState]);
                    element.task_status = states[changedState]
                    // console.log(element.task_status);


                }
                // console.log(changedTableList);
                setTableList(changedTableList)
            });
        }

    }

子组件先注册好，props接收：

interface childProps { 
    changeTaskState: Function,
}

const { project_name, project_id, changeTaskState, BatchDeleteTask,changeCoder } = props

我这边在axios返回成功后，使用这个回调函数：return changeTaskState([TaskID, value])

当然我是返回了数组，因为前面父组件我给了id一个any，会比较方便

const handleChangeStateOk = () => {
        setIsModalOpen(false);
        axios.post('/api/task/task', {
            action: "theBatchTaskStatusByIDList",
            newdata: { task_id: TaskID, task_status: value }

        }).then(
            response => {
                console.log('filter', response);

                message.success('批量修改状态成功！');
                return changeTaskState([TaskID, value])
            },
            error => {
                message.error('批量修改状态失败，请刷新重试！');
                // return []
            })

        // dispatch({ type: "changeInquireState", val: !inquireState })
    };

祖孙组件传值

• 祖先组件传值给孙子组件也很简单，也参考上面这篇文章

• 孙子组件要传值给祖先组件

完成的需求：根组件有tablelist，孙子组件要去修改tablelist并且根组件同步更新

祖先组件，也就是根组件用Context.Provider包裹，export const Context = createContext({})

这边我给Context一个空对象，（给空数组不行），然后把要传的值和修改值的函数写成一个数组，都作为values传给子孙组件。其实理解为把const [tableList, setTableList] = useState<any>() 都给子组件，让子组件也可以去修改tablelist

const [tableList, setTableList] = useState<any>()   
return (
         <Context.Provider value={[tableList, setTableList]} >
        <Layout>
            {/* <Button onClick={getFilteredTableData}>按钮</Button> */}
            <Layout>
                <Filter ></Filter >
            </Layout>
            <Layout>
                    <CenterFilter />             
            </Layout>
            <Layout className="search-result-list" style={{ marginTop: 0 }}>            
                    <ProjectTable tableList={tableList} />           
            </Layout>
        </Layout>
</Context.Provider>

    )
}

export const Context = createContext({})

子组件：

import { Context } from "../index";
let list = useContext(Context)

// 原来的tablelist
const oriTableList = list[0]
// setTableList
const changeList = list[1]
//数组深拷贝
let changedTableList = JSON.parse(JSON.stringify(oriTableList))
//更加id去修改对应的对象值
changedTableList.forEach((element: any) => {
if (element.project_id == data.project_id) {
    element['project_id'] = response.data.project_id
    element['project_period'] = values.project_year + '-' + values.project_quarter
    element['project_year'] = values.project_year
    element['project_quarter'] = values.project_quarter
    element['project_name'] = values.project_name
    console.log(values.biz_id);
    
    allLineTree.forEach((lineelement: any) => {
        lineelement.children.forEach((childelement: any) => {
            if (childelement.key == values.biz_id) {
                element['biz_name'] = childelement.title
                console.log(childelement.title);
                
            }
        });
    });
   console.log(element); 
}


});
//修改
changeList(changedTableList)