React/NextJS 如何给组件映射数组/对象中的目标组件传递Props

问题根因 #

你当前的实现里component_list存储的是已经实例化完成的React JSX元素（<SampleComponent />写法执行后就已经生成了固定的元素对象，不可再追加props），因此无法在匹配到目标组件后再传入自定义props。你之前将列表写在函数内的方案虽然能实现传参，但每次调用函数都会重建整个组件列表，且所有组件都预先绑定了props，写法冗余性能也不佳。

最优实现方案 #

只需要调整component_list的存储内容，改为存储组件本身（而非实例化的JSX），匹配到目标组件后再统一传参实例化即可：

改造后的 mapComponent.jsx #

import SampleComponent from './SampleComponent';
import SampleComponentTwo from './SampleComponentTwo';

// 全局常量仅初始化一次，存储组件引用而非实例化JSX
const component_list = {
    employee: {
        create: SampleComponent,
        update: SampleComponentTwo,
    },
};

const mapComponent = (path, props) => {
    let TargetComponent = component_list;
    // 按路径匹配目标组件
    path.split('__').forEach((pathKey) => {
        TargetComponent = TargetComponent[pathKey];
    });
    // 仅给匹配到的目标组件传递props，再返回实例化的JSX
    return <TargetComponent {...props} />;
};

export default mapComponent;

PersistentWindow.jsx不需要做任何改动，原有调用逻辑完全兼容。

可选增强：边界错误处理 #

可以追加路径不存在、匹配结果不是合法组件的兜底逻辑，避免页面报错崩溃：

const mapComponent = (path, props) => {
    try {
        let TargetComponent = component_list;
        path.split('__').forEach((pathKey) => {
            TargetComponent = TargetComponent[pathKey];
        });
        // 校验匹配结果是否为合法React组件
        const isValidComponent = typeof TargetComponent === 'function' 
            || TargetComponent?.prototype?.isReactComponent;
        if (isValidComponent) {
            return <TargetComponent {...props} />;
        }
        throw new Error(`路径${path}未匹配到合法组件`);
    } catch (err) {
        console.error('动态组件加载失败：', err);
        // 可替换为你自定义的错误提示组件
        return null;
    }
};

这个方案的优势：

• 组件列表全局仅初始化一次，无重复创建的性能损耗
• 仅目标匹配组件会接收传入的props，不会泄露给其他无关组件
• 后续新增映射规则只需要在component_list中追加对应路径和组件引用即可，维护成本低

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