构建模式匹配组件动态系统：如何延迟传递组件Props？

你可以通过不提前渲染组件实例，而是保存组件引用或渲染函数的方式解决这个问题，等解析出动态参数后再生成带正确Props的组件。以下是两种可行的实现方式：

方案1：使用渲染函数（Render Function） #

修改配置结构，将element替换为接收匹配结果的render函数，这样就能在匹配完成后动态传入Props：

const routeConfig = {
  pattern: "xyz",
  render: () => <XyzLinks />,
  children: [
    {
      pattern: /\d+/, // 修正正则以匹配多位数字
      render: (matchResult) => <XyzLevelLinks level={matchResult[0]} />
    }
  ]
};

匹配逻辑示例 #

当解析路径时，先匹配对应的pattern，再调用render函数并传入匹配结果：

function getMatchedComponent(path) {
  // 匹配顶层路径
  if (path === routeConfig.pattern) {
    return routeConfig.render();
  }

  // 处理子路径（如"xyz/123"）
  const [parentSegment, childSegment] = path.split('/');
  if (parentSegment === routeConfig.pattern) {
    for (const childRoute of routeConfig.children) {
      const match = childSegment.match(childRoute.pattern);
      if (match) {
        // 将匹配结果传入render函数，动态生成组件
        return childRoute.render(match);
      }
    }
  }

  return null; // 无匹配时返回null
}

方案2：分离组件与Props生成逻辑 #

如果希望更清晰地拆分组件定义和Props逻辑，可以在配置中单独保存组件类型和Props生成函数：

const routeConfig = {
  pattern: "xyz",
  component: XyzLinks,
  defaultProps: {},
  children: [
    {
      pattern: /\d+/,
      component: XyzLevelLinks,
      getProps: (matchResult) => ({ level: matchResult[0] })
    }
  ]
};

匹配逻辑示例 #

function getMatchedComponent(path) {
  // 匹配顶层路径
  if (path === routeConfig.pattern) {
    const Component = routeConfig.component;
    return <Component {...routeConfig.defaultProps} />;
  }

  // 处理子路径
  const [parentSegment, childSegment] = path.split('/');
  if (parentSegment === routeConfig.pattern) {
    for (const childRoute of routeConfig.children) {
      const match = childSegment.match(childRoute.pattern);
      if (match) {
        const Component = childRoute.component;
        const props = childRoute.getProps ? childRoute.getProps(match) : {};
        return <Component {...props} />;
      }
    }
  }

  return null;
}

核心思路 #

两种方案的本质都是延迟组件的渲染时机：不再提前创建<XyzLevelLinks level={???} />这种未完成的组件实例，而是等到拿到匹配到的动态参数后，再通过函数调用或组件实例化的方式生成带正确Props的组件。

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