React SSR根据API响应动态导入组件答案

【问题标题】：React SSR dynamically import components according to API responseReact SSR根据API响应动态导入组件
【发布时间】：2018-05-10 09:06:22
【问题描述】：

我正在使用 razzle 工具构建 SSR React 应用程序。服务器正在使用 express 框架。我想根据 API 响应中包含的值动态加载 React 组件。

我的文件夹结构如下：

观看次数
- 默认
-- Home.js
- 主题1
-- Home.js

我正在使用 SSR。在我的服务器上

const markup = renderToString( 
<Provider store={store}> 
   <StaticRouter context={context} location={req.url}> 
      <App theme={theme} /> 
   </StaticRouter> 
</Provider> 
);

在 App 组件中，我需要从相应的子文件夹导入组件，或者如果它不存在，则从 default 子文件夹导入 default 组件。可能有很多主题子文件夹，所以我无法手动导入所有组件。

这应该通过快递在服务器上完成还是有其他方法？

谢谢

【问题讨论】：

标签： javascript node.js reactjs express react-router-v4

【解决方案1】：

您是否正在寻找这样的东西？我不太确定您是否使用服务器端渲染。

import DefaultComponent from './views/default.js';
import Theme1Component from './views/theme1.js';

this.state = {
     visibleDefault: true
}

然后您可以简单地根据响应更新状态。

然后在你的渲染中你可以拥有这个

render(){
    return(
       { visibleDefault ? <DefaultComponent/> : <Theme1Component/> }
    )
}

【讨论】：