reactjs - 如何动态包含反应元素？

Question

我有几个元素的名称都以“Page”结尾，并且我作为道具传递了一个包含这些名称开头的字符串数组。我正在导入诸如 HomePage、AboutPage、ContactsPage 之类的元素，并且我有一个字符串数组作为道具可用，如下所示：['Home', 'About', 'Contact', ...] 如何映射数组并渲染元素？

我尝试了字符串插值，我可以生成正确的组件名称，但组件本身不会被渲染。我最近的尝试是这样的：

import React from 'react';
import './Pages.scss';
import PropTypes from 'prop-types';
import HomePage from '../../pages/HomePage/HomePage';
import AboutPage from '../../pages/AboutPage/AboutPage';
import ProjectsPage from '../../pages/ProjectsPage/ProjectsPage';
import SkillsPage from '../../pages/SkillsPage/SkillsPage';
import LearningPage from '../../pages/LearningPage/LearningPage';

const Pages = ({ pages }) => {
  Pages.propTypes = {
    pages: PropTypes.array.isRequired,
  };

  return (
    <div className="Pages">
      {
        pages.map((page) => {
          const ComponentName = `${page}Page`;
          return <ComponentName />;
        })
      }
    </div>
  );
};

export default Pages;

我想渲染组件等，但我正在渲染“ComponentName”组件。

标签： reactjs

Answer 1

您可以使用import()动态加载或使用React.lazy延迟导入，这仍然需要动态import().

我将向您展示如何在这个答案中动态地懒加载组件。

所需的步骤是，
1. 创建一个接受页面名称并动态加载的方法。<Suspense /> 2.用3.动态加载页面组件包装动态加载的Pages

1. 创建一个接受页面名称并动态加载的方法。

const loadPage = page => lazy(() => import(`./pages/${page}Page`));

你不一定需要使用lazy，但原理是一样的。（你只是不需要Suspense）

2.包装动态加载的页面<Suspense />

const pageNames = ["Home", "About", "Contact"];
function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Pages pages={pageNames} />
      </Suspense>
    </div>
  );
}

正如您所提到的，您已经有一个pages可以传递的列表，Pages因此将其传递给<Pages pages={pageNames} />并用Suspense包装。

3.动态加载页面组件

这就是神奇和有趣的事情发生的地方

function Pages({ pages }) {
  return (
    <ol>
      {pages.map(page => {
        const Page = loadPage(page);
        return (
          <li key={page}>
            <Page />
          </li>
        );
      })}
    </ol>
  );
}

从第 1 步开始，我们有了loadPage动态加载页面组件。

const loadPage = page => lazy(() => import(`./pages/${page}Page`));

再显示一次作为参考。

对于每个页面，您加载一个页面，将其分配给Page（首字母大写）并简单地实例化它（<Page />）。

这就是动态加载组件所需的全部内容。

你可以在这里找到工作演示。

无耻的插头。

如果你想深入挖掘，我已经写了两篇关于如何动态加载组件的文章。

1. 按需动态加载 React 组件
2. 使用 React.lazy 按需动态加载 React 组件