Как использовать массив, содержащий имена некоторых компонентов, для рендеринга этих предопределенных компонентов

Question

Хорошо, у меня есть вопрос, который не так прост, как кажется. Я разрабатываю веб-проект, в который я мог бы добавить свои статьи. Теперь дело в том, что статья была бы большой страницей, которая требовала бы большого форматирования и прочего. Поэтому я подумал о добавлении одного компонента на одну статью, которую я пишу.

Например, предположим, что это ArticleX. js

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

Аналогично, предположим, что, как и эта, у меня также есть много других статей. Допустим, еще 2. ArticleA, ArticleB.

Пока все хорошо. Теперь у меня есть страница с именем 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>
    )
}

Теперь дело в том, что статьи будут увеличиваться на go, и каждый раз мне придется изменять файл 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

Вы можете использовать динамический c импорт

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