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

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>
    )
}