react创建子组件

//子组件
const SupplierList = ({ supplierId, handleSupplierId }) => {
  const { t } = useTranslation();
  const [data, setData] = useState(null);   //数据
  const [page, setPage] = useState(         //当前页
    useStore().getState().page?.supplierListPage || 1
  );
  const [total, setTotal] = useState(1);  //总页数
  const [searchParams, setSearchParams] = useState({}); //每页数量
  const { saveSupplierListPage } = usePageActions();
  console.log("supplierId:", supplierId);

  useEffect(() => {
    const params: any = {
      page,
      limit: 12,
      ...searchParams,
    };
    // 供应商列表
    fetchErpURL(params).then(res => {
      unstable_batchedUpdates(() => {
        setData(res.list)
        setTotal(res.total)
      })
    }).catch(e => {

    })

  }, [page, searchParams])


  const changePage = (page) => {
    setPage(page);
    saveSupplierListPage(page);
  };


  const onPagination = (lastPage) => {
    setData(null);
    changePage(lastPage);
  };

  // 供应商
  const supplierColumns = [
    {
      title: "供应商",
      dataIndex: 'orgName',
    },
  ];
  return <Table
    columns={supplierColumns}
    dataSource={data}
    rowKey='sid'
    pagination={{
      size: 'default',
      current: page,
      onChange: onPagination,
      total,
      pageSize: 12,
    }}
    rowClassName={(record) => {
      return record.sid === supplierId ? styles['split-row-select-active'] : '';
    }}
    onRow={(record) => {
      return {
        onClick: () => {
          if (record.sid === supplierId) {
            handleSupplierId(0)
          } else {
            handleSupplierId(record.sid)
          }
        },
      };
    }}
  />
}

//子组件挂载
const SupplierListMemo = React.memo(SupplierList);

//父组件
<SupplierListMemo supplierId={supplierId} handleSupplierId={handleSupplierId} />