能否在高阶组件(HOC)中修改Props后传递给子组件？

高阶组件的核心能力之一就是封装组件逻辑、修改或增强传入的Props，正好适配你想要先处理data和config再传递给Grid组件的需求。

修改后的HOC示例代码 #

import { uuidv4 } from 'your-uuid-package'; // 请替换为你的uuid依赖路径

export const hocGrid = (Grid) => {
  return ({ data, config, ...restProps }) => {
    // 处理data：这里示例为给每个数据项添加标识并过滤无效数据
    const processedData = data
      .map(item => ({ ...item, isProcessed: true }))
      .filter(item => item.status !== 'inactive');

    // 处理config：这里示例为合并默认配置，覆盖或新增特定配置项
    const processedConfig = {
      ...config,
      enableSorting: true, // 强制开启列排序
      pagination: {
        ...config.pagination,
        pageSize: config.pagination?.pageSize || 20 // 兜底分页大小
      }
    };

    // 将处理后的Props传递给原始Grid组件
    return (
      <Grid
        data={processedData}
        config={processedConfig}
        id={restProps.id || uuidv4()}
        {...restProps}
      />
    );
  };
};

关键说明 #

• 使用...restProps收集data和config之外的所有Props，避免手动逐个传递，保持代码简洁
• 在包装组件内部可以根据业务需求自由编写逻辑：比如数据过滤、格式转换、配置合并、默认值设置等
• 处理完成后，将新的data、config与其他原始Props一起传入Grid组件即可

内容的提问来源于stack exchange，提问作者meg