如何使用包含一些组件名称的数组来呈现那些预定义的组件

Question

好，所以我有一个问题，听起来并不简单。我正在设计一个Web项目，可以在其中添加文章。现在的事情是，一篇文章将是一个很大的页面，需要大量的格式设置和其他操作。因此，我想在撰写的每篇文章中增加一个组件。

例如，假设其ArticleX.js

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

类似地，我想也有很多其他文章。假设还有2个。 ArticleA，ArticleB。

到目前为止，一切都很好。现在，我有一个名为ShowArticles.js的页面，它不过是另一个React Component，需要呈现我们刚才讨论的所有这些文章。

一种简单的方法是在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>
    )
}