父组件调用子组件方法（刷新页面）——2022-06-28

需求：页面进行一些操作后（新增/编辑/修改状态等），需要刷新页面。但页面渲染的方法是定义在tableList组件内部的，操作按钮及一些弹框则是在父组件。就需要从父组件调用子组件请求页面刷新的方法，如图。

 解决方式

子组件

引入useImperativeHandle,forwardRef

把请求页面的方法重写在useImperativeHandle回调里面。

  useImperativeHandle(ref, () => ({
    renderTable: (pagination, queryParam, activeKey) => {
      function getUserStatus() {
        let user_status = 1;
        if (activeKey == 'tab1') {
          user_status = 1;
        }
        if (activeKey == 'tab2') {
          user_status = 0;
        }
        if (props.deletable) {
          user_status = -1;
        }
        if (props.recycleBin) {
          user_status = -1;
        }
        return user_status;
      }
      const tableParam = {
        jsonData: {
          currentwhere: queryParam.length ? JSON.stringify(queryParam) : [],
          ...pagination,
          sorting: 'user_guid',
          user_status: getUserStatus(),
          sortdir: 'asc',
          user_status: getUserStatus(),
        },
      };
      tabCount(tableParam).then((tableCount) => {
        setTabsData(() => {
          return tableCount.data;
        });
      });
      getUserMgtUserList(tableParam).then((res) => {
        if (res) {
          setTotalCount(() => {
            return res.data?.totalRows || 0;
          });
          setTableData(() => {
            return res.data?.list || [];
          });
        }
      });
    },
  }));

注：参数ref一定要写，如图。

最后，导出组件时用forwardRef包裹，如图。

父组件

给子组件加上ref

     <TableList
        ref={tableRef}
        queryParam={queryParam}
        columns={tableColumns}
        activeKey={activeKey}
        handleSelected={handleSelected}
        setTab={(tab) => {
          setActiveKey(tab);
        }}
      />

 最后在操作完成后通过ref直接调用子组件方法

tableRef.current.renderTable(pagination, queryParam, activeKey);

 至此，就能实现刷新效果了

但此问题还需优化，希望能找到更优的方式