如何动态包含react元素？

Question

我有几个元素的名称都以“ Page”结尾的元素，我正在传递一个包含那些名称开头的字符串数组作为prop。 我正在导入诸如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”组件。

Answer 1

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

我将向您展示如何在此答案中延迟加载组件。

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

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（capitalize the first letter）并简单地实例化它（<Page />）。

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

您可以在此处找到有效的演示。

无耻的插头。

如果您想进一步研究，我写了两篇关于如何动态加载组件的文章。

1. Loading React Components Dynamically on Demand
2. Loading React Components Dynamically on Demand using React.lazy

Answer 2

使用componentName映射组件，然后您可以返回相应的正确

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 routerMap = {
  'pageabout': <AboutPage/>,
  'pagehome': <HomePage/>,
}

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

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

export default Pages;