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

Question

I am building SSR React app with razzle tool. Server is using express framework. I would like to load React components dynamically according to value included in API response.

I have folder structure like:

views
- default
-- Home.js
- theme1
-- Home.js

I am using SSR. On the server I have

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

Inside App component, I need to import component from corresponding subfolder or if its absent than import default component from the default subfolder. There can be many theme subfolders so I can't import all the components manually.

Should this by done on server by express or is there another way?

Thanks

Answer 1

Are you looking for something like this? I'm not quite sure if you are using server side rendering.

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

this.state = {
     visibleDefault: true
}

You can then simply update the state base on the response.

Then in your render you can have this

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