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

Question

Okay, So I've this question which is not as simple as It sounds. I'm designing a web project where I could add my articles. Now the thing is that an article would be a big page which would require a lot of formatting and the other things. Therefore I thought of adding one component per one article that I write.

eg, Suppose its ArticleX.js

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

Similarly suppose like this one I've a lot of other articles too. Let's say, 2 more. ArticleA, ArticleB.

So far so good. Now I've a page called ShowArticles.js which is nothing but another React Component which needs to render all these articles we just talked about.

A simple approach to do that would be doing something like this in 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>
    )
}

Now the thing is that the articles would go on increasing and each time I'll have to modify the ShowArticles.js file to accommodate the new changes. Instead I want to make an array of these components, If not possible then the component names and then use it to render them dynamically. Think of an array just like some json data being pulled out of a json file.

So Suppose to do that I make an array of Component names.

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

Now the question is, how can I use this array to reframe my ShowArticles.js file so that each of these component name and source is taken and then that information is used to : 1. Import that component from the source 2. Render that component inside 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>
    )
}

Now If I'm able to do something like this, all I'll need to do is to create the new article and then add it's name and source in the array. Rest everything would be taken care by the code itself and also I would be able to use this array to show some featured content on some other page than just ShowArticles.js

Thanks in advance!

Answer 1

You can use dynamic imports

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