通过普通JavaScript函数返回值渲染React组件是否为不良实践？

你用映射表关联组件名称与组件本身，再通过函数动态返回渲染实例的做法，是React社区非常常见且推荐的组件动态渲染方案，完全不属于不良实践，反而比大量条件判断（if/else、switch）更简洁易维护。

核心优点： #

• 代码更简洁：父组件无需引入所有组件，也不用写冗长的分支逻辑，只需要调用getRenderableWidget传入名称和props即可，逻辑清晰
• 扩展性极强：新增组件时，仅需在widgetMap中添加一条映射关系，不需要修改任何父组件的渲染代码
• 复用性好：getRenderableWidget可以在多个父组件中复用，避免重复编写动态渲染逻辑

可以优化的细节： #

1. 处理组件不存在的情况：
   为了避免传入不存在的组件名称导致报错，可以在函数中增加判断，返回null或默认占位组件：

   export const getRenderableWidget = (name, props = {}) => {
     const Component = widgetMap[name];
     if (!Component) return null; // 或者返回<DefaultWidget />作为占位
     return <Component {...props} />;
   };
   

2. 大数量组件时的性能优化：
   如果组件数量较多或体积较大，可以用React.lazy实现按需加载，减少初始打包体积：

   import React from 'react';
   
   export const widgetMap = {
     StockWidget: React.lazy(() => import("../Components/Widgets/StockWidget/StockWidget")),
     SampleWidget: React.lazy(() => import("../Components/Widgets/SampleWidget")),
     WeatherWidget: React.lazy(() => import("../Components/Widgets/WeatherWidget")),
   };
   

   然后在父组件中用Suspense包裹动态渲染的内容，提供加载状态：

   <React.Suspense fallback={<div>组件加载中...</div>}>
     {getRenderableWidget(currentWidgetName, widgetProps)}
   </React.Suspense>
   

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