javascript - 如何使用包含一些组件名称的数组来渲染那些预定义的组件

Question

好吧，我的问题并不像听起来那么简单。我正在设计一个网络项目，我可以在其中添加我的文章。现在的问题是，一篇文章将是一个大页面，需要大量的格式设置和其他东西。因此我想到在我写的一篇文章中添加一个组件。

例如，假设它是 ArticleX.js

export const ArticleX = () => {
return (
    <div>
        //My article X goes here
    </div>
)}

类似地，假设像这篇文章一样，我还有很多其他文章。比方说，还有2个。文章A，文章B。

到目前为止一切顺利。现在我有一个名为 ShowArticles.js 的页面，它只不过是另一个 React 组件，它需要渲染我们刚才讨论的所有这些文章。

一个简单的方法是在 ShowArticles 中执行类似的操作:

import {Article X} from './Articles/ArticleX';
import {Article A} from './Articles/ArticleA';
import {Article B} from './Articles/ArticleB';

export const ShowArticles = () => {
    return (
        <div>
            <Article X />
            <Article A />
            <Article B />
        </div>
    )
}

现在的问题是，文章会继续增加，每次我都必须修改 ShowArticles.js 文件以适应新的更改。相反，我想创建这些组件的数组，如果不可能，则创建组件名称，然后使用它来动态渲染它们。将数组想象为从 json 文件中提取的一些 json 数据。

所以假设我创建一个组件名称数组。

let travelArticles = [
    {id: 1, articleName: 'ArticleX', source:'./Articles/ArticleX'},
    {id: 2, articleName: 'ArticleA', source:'./Articles/ArticleA'},
    {id: 3, articleName: 'ArticleB', source:'./Articles/ArticleB'}
];

现在的问题是，如何使用此数组来重新构建我的 ShowArticles.js 文件，以便获取每个组件名称和源，然后使用该信息来: 1. 从源导入该组件 2.在 ShowArticles.js 中渲染该组件

export const ShowArticles = ({travelArticles}) => {
    return (
        <div>
            // How to import components using source and name in travelArticles and then use that information to render them ?
        </div>
    )
}

现在，如果我能够做这样的事情，我所需要做的就是创建新文章，然后将其名称和来源添加到数组中。其余的一切都将由代码本身处理，而且我还可以使用此数组在 ShowArticles.js 之外的其他页面上显示一些特色内容

提前致谢!

Answer 1

您可以使用动态导入

let travelArticles = [
    {id: 1, articleName: 'ArticleX', source:'./Articles/ArticleX'},
    {id: 2, articleName: 'ArticleA', source:'./Articles/ArticleA'},
    {id: 3, articleName: 'ArticleB', source:'./Articles/ArticleB'}
];

export const ShowArticles = ({travelArticles}) => {
    const [components, setComponents] = useState([]); 
    useEffect(() => {
      const promises = travelArticles.map(art => import(art.source).then(mod => mod.default));
      Promise.all(promises).then(comps => setComponents(comps));
    }, []);
    return (
        <div>
            {components.map((Article, index) => <Article {...travelArticles[index]} />)}
        </div>
    )
}