时间戳

首页 > 解决方案 > 如何在 ReactJS 中动态导入和渲染组件

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

问题描述

我想在 React Dynamically 中导入和渲染一个组件。有两个组件，第一个是 Dashboard，第二个是 Home，所以基本上，我想在 Home 中动态渲染 Dashboard 组件，而不需要预先导入它，或者可能在 Home 组件的渲染函数中导入。

仪表板.js

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

export default Dashboard;

主页.js

import React, {Component} from ‘react’;

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

export default Home;

标签： javascriptreactjs

解决方案

您可以使用 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;

推荐阅读