Reactjs 如何动态地包含react元素？

我有几个元素，它们的名称都以“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;

从“React”导入React；
导入“/Pages.scss”；
从“道具类型”导入道具类型；
从“../../pages/HomePage/HomePage”导入主页；
从“../../pages/AboutPage/AboutPage”导入AboutPage；
从“../../pages/ProjectsPage/ProjectsPage”导入ProjectsPage；
从“../../pages/SkillsPage/SkillsPage”导入SkillsPage；
从“../../pages/LearningPage/LearningPage”导入LearningPage；
常量页面=（{Pages}）=>{
Pages.propTypes={
页面：需要PropTypes.array.isRequired，
};
返回(
{
pages.map（（页面）=>{
const ComponentName=`${page}page`；
返回；
})
}
);
};
导出默认页面；

---

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

使用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;

从“React”导入React；
导入“/Pages.scss”；
从“道具类型”导入道具类型；
从“../../pages/HomePage/HomePage”导入主页；
从“../../pages/AboutPage/AboutPage”导入AboutPage；
从“../../pages/ProjectsPage/ProjectsPage”导入ProjectsPage；
从“../../pages/SkillsPage/SkillsPage”导入SkillsPage；
从“../../pages/LearningPage/LearningPage”导入LearningPage；
常量路由映射={
“pageabout”：，
“pagehome”：，
}
常量页面=（{Pages}）=>{
Pages.propTypes={
页面：需要PropTypes.array.isRequired，
};
返回(
{
pages.map（（页面）=>{
const ComponentName=`${page}page`；
返回routerMap[ComponentName]；
})
}
);
};
导出默认页面；

您可以使用动态加载或使用惰性导入，这仍然需要使用动态

导入（）

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

所需步骤为，
1.创建一个接受页面名称并动态加载的方法。 2.使用

3.动态加载页面组件

1.创建一个接受页面名称并动态加载的方法。 您不一定需要使用

lazy

，但原理是一样的。（你不需要悬念）

2.使用

const pageNames=[“主页”、“关于”、“联系”]；
函数App（）{
返回(
);
}

正如您所提到的，您已经有了一个

页面列表

，您可以将其传递到

页面

，因此将其传递到

，并用

3.动态加载页面组件

---

这就是神奇和有趣的事情发生的地方，你错过了

键

道具！！谢谢，但这不会增加代码重复吗？这种解决方案不使用道具。如果我想改变页面的顺序或添加新的页面，这有点不方便。使用道具的意义在于，我只需在一个地方编辑页面列表（我正在传递的道具）

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

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