javascript - 如何使用包含一些组件名称的数组来呈现那些预定义的组件
问题描述
好的,所以我有这个问题并不像听起来那么简单。我正在设计一个可以添加我的文章的网络项目。现在的问题是一篇文章将是一个很大的页面,需要大量的格式和其他东西。因此,我想在我写的每一篇文章中添加一个组件。
例如,假设它的 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
提前致谢!
解决方案
您可以使用动态导入
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>
)
}
推荐阅读
- keychain - 使用 launchd 运行程序导出期间的 Codesign 失败
- selenium - 如何在 Jenkins 电子邮件通知中附加屏幕截图
- spring - 在同一个 Spring Boot 应用程序中连接两个数据库之间的实体
- c++ - 如何制作一个接受另一个带有可变参数的函数
- vue.js - Flatpickr 获取不正确的日期时间
- c++ - 从 OpenCV 捕获设备捕获 YUV 帧
- web3 - 连接到 walletconnect with web3modal
- javascript - Javascript 在加载时调用控制器以写入文件
- python - 使用时间戳根据月份Python划分列表
- ionic2 - 如何从离子2中的离子选择标签中删除插入符号图标