Question

我想在React中动态导入和渲染组件。有两个组件，第一个是Dashboard，第二个是Home，所以基本上，我想动态地在Home中渲染Dashboard组件，而无需事先导入它，也可能不导入Home组件的渲染功能。

Dashboard.js

class Dashboard extends Component
{
  render()
 {
   return( Dashboard Content Goes Here...! )
 }
}

export default Dashboard;

Home.js

import React, {Component} from ‘react’;

class Home extends Component
{ 
  render()
  { 
    return( // import & render Dashboard component here ) 
  } 
}

export default Home;

Answer 1

您可以使用React.lazy延迟导入组件。这意味着该组件仅在/如果该组件挂载时才导入。这减少了父组件安装所需的时间。如果使用正确配置的Webpack，它将为延迟导入的组件创建一个不同的捆绑包，并且仅在该组件安装时才加载该捆绑包。


import React, { Component } from ‘react’;

const Dashboard = React.lazy(() => import('...path here'));

class Home extends Component
{ 
  render()
  { 
    return <Dashboard /> 
  } 
}

export default Home;

如何在ReactJS中动态导入和渲染组件

1 个答案: