在状态内部动态加载反应组件

Question

I have a really interesting problem at hand.

I am currently working on a Admin-Interface for a headless CMS and I want to dynamically load the components for viewing the content of different parts.

I know that it is rather easy to accomplish wit React Router since v4, but I don't want to rely on Routes to handle this to keep the URL as clean as possible.

Here is what I am trying to do:

1. I want to render the basic layout of the UI (in which I load the different sub-components when clicking the navigation-links)
2. Inside the async componentWillMount() function of this basic layout I want to import() said components using await import()
3. Ideally those should be stored to the state inside a property called this.state.mainComponents
4. I will then pass down the names of the components to the navigation component along with a function which will change the currently displayed component in the parents state

I tried several different approaches, but did not manage to get it to work until now.

This is what I have now:

  async componentDidMount() {
    const mainComponents = {
      Dashboard: await import('../_mainComponents/Dashboard').then(
        ({ Dashboard }) => {
          return Dashboard;
        },
      ),
    };

    const componentNames = [];

    for (let p in mainComponents) {
      componentNames.push(p);
    }

    this.setState({
      mainComponents: {
        views: mainComponents,
        names: componentNames,
      },
      currentComponent: mainComponents.Dashboard,
      currentTitle: 'Dashboard',
    });
  }

I would really appreciate any help you could give me on this.

EDIT:

So according to the answer of @Mosè Raguzzini I implemented react-loadable again and tried to store the const inside my state like this:

const LoadableDashboard = Loadable({
  loader: () => import('../_mainComponents/Dashboard'),
  loading: Loading
});

const mainComponents = {
  Dashboard: LoadableDashboard
};

And inside my constructor function I am trying to pass this Object into the state like this:

const componentNames = [];

for (let p in mainComponents) {
  componentNames.push(p);
}

this.state = {
  mainComponents: {
    views: mainComponents,
    names: componentNames,
  },
  currentComponent: null,
  currentTitle: null,
  loading: false,
};

It is not working when trying to output the Components stored inside the this.state.mainComponents.views object inside to the render function.

When using <Dashboard /> it is working as expected, but this is not what I am trying to accomplish here since I don't want to add every component to the render function in a massive switch ... case .

Does anybody of you have an idea how I can accomplish this?

Answer 1

I found a solution to my problem and wanted to share it with all of those who will come after me searching for an appropiate answer.

Here is what I did:

import Loadable from 'react-loadable';
import Loading from '../_helperComponents/Loading';

// Define the async-loadable components here and store them inside of the mainComponent object
const LoadableDashboard = Loadable({
  loader: () => import('../_mainComponents/Dashboard'),
  loading: Loading,
});

const LoadableUserOverview = Loadable({
  loader: () => import('../_mainComponents/UserOverview'),
  loading: Loading,
});

const mainComponents = {
  Dashboard: <LoadableDashboard />,
  User: <LoadableUserOverview />,
};

I do not store the components inside my state (it would have been possible but goes against the guidelines as I've found out by researching state even further) :D

With this object I can simply call the corresponding component by outputting it in the render() function like this:

render() {
  return (
    <div>
      {mainComponents[this.state.currentComponent]}
    </div>
  );
}

I hope I could help someone with this. Happy coding!

Answer 2

I suggest to take a look to react-loadable:

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

It provides the feature you need in a clean style.