Javascript 反应元件在状态内的动态加载

我手头有一个非常有趣的问题

我目前正在为headless CMS开发一个管理界面，我想动态加载组件以查看不同部分的内容

我知道从v4开始就很容易实现，但我不想依靠路由来处理这个问题，以尽可能保持URL的干净

以下是我试图做的：

我想呈现UI的基本布局（在其中加载 单击导航链接时的不同子组件）

在这个基本布局的

async component willmount（）

函数中，我想

import（）

使用

wait import（）来表示组件

理想情况下，这些组件应该存储到名为

this.state.mainpomponents

然后，我将把组件的名称传递给导航组件，并提供一个函数，该函数将更改父级

状态中当前显示的组件

我尝试了几种不同的方法，但直到现在才成功

这就是我现在拥有的：

  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',
    });
  }

如果你能在这方面给我帮助，我将不胜感激

编辑：

因此，根据@MosèRaguzzini的回答，我再次实现了

react loadable

，并尝试将常量存储在我的状态中，如下所示：

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

const mainComponents = {
  Dashboard: LoadableDashboard
};

const componentNames = [];

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

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

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

在我的构造函数中，我试图将这个对象传递到如下状态：

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

const mainComponents = {
  Dashboard: LoadableDashboard
};

const componentNames = [];

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

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

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

当试图将存储在

this.state.mainComponents.views

对象中的组件输出到渲染函数时，它不起作用

当使用

时，它可以按预期工作，但这不是我在这里试图实现的，因为我不想在一个巨大的

开关中向渲染函数添加每个组件。。。案例

---

你们有谁知道我如何做到这一点吗？

我建议大家看看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/>;
  }
}

从“react Loadable”导入可加载；
从“/my Loading component”导入加载；
常量LoadableComponent=可加载({
加载程序：（）=>导入（'./我的组件'），
加载：加载，
});
导出默认类App扩展React.Component{
render（）{
回来
}
}

---

它以简洁的风格提供了您所需的功能。

我找到了解决问题的方法，并想与所有在我之后寻找合适答案的人分享

以下是我所做的：

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 />,
};

我希望我能在这方面帮助别人。

---

快乐编码

好吧，我就是这么做的，我缺少的一件事就是在我的州内存储这些组件的可能性。在我的实施过程中，也有可能出现问题，但我会再试一次。所以，感谢您的输入。在开发人员的意图中（这不是约束），状态必须是可序列化的，所以最好只在其中存储普通对象。此外，loadable还有一些非常好的特性，比如预加载，或者预加载触发器（即：在鼠标悬停按钮时开始预加载组件），我已经浏览了loadable文档，发现它确实非常有用。在微调我的应用程序时，我将尝试使用一些更具体的组件。谢谢你的提示。