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

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