javascript - 将地图中的数据添加到组件列表中
问题描述
我有以下结构的地图。
const myMap = {
"title1": [
{
name: 'one'
},
{
name: 'two'
},
],
"title2": null,
"title3": [
{
name: 'three'
},
{
name: 'four'
},
],
}
我想将以上内容转换为组件列表,如下所示。
[
// this array data came from the key title1 as it is first in map
[
<MyComponent name={name}/>, // name is 'one'
<MyComponent name={name}/>, // name is 'two'
],
// this array data came from the key title3 as it is next in map. title2 doesn't show up as its null
[
<MyComponent name={name}/>, // name is 'three'
<MyComponent name={name}/>, // name is 'four'
],
]
我怎样才能做到这一点?
目前尝试以下未按预期显示数据。
<div>
{ myMap && Object.keys(myMap).forEach(key => {
const array = myMap[key];
array.forEach(obj => {
return <MyComponent name={obj.name}/>
})
})
}
</div>
解决方案
您也需要map
在外部使用map
:
const myMap = {
title1: [
{
name: "one",
},
{
name: "two",
},
],
title2: null,
title3: [
{
name: "three",
},
{
name: "four",
},
],
},
MyComponent = ({ name }) => <div>{name}</div>,
generate = (myMap) => {
return (
<div>
{myMap &&
Object.keys(myMap).map((key) => {
const array = myMap[key],
temp =
array &&
array.map((obj) => {
return <MyComponent name={obj.name} />;
});
return (array && <div class="sep">{temp}</div>);
})}
</div>
);
};
ReactDOM.render(generate(myMap), document.getElementById("root"));
.sep{ outline: 1px solid red; margin: 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- javascript - 如何从 HTML 登录页面在 node.js 的控制台中通信或获取数据?
- python - 如何通过使用 boto 传递卷 ID 来查找 ec2 实例 ID
- python - Python + CSV:如何创建一个新的 csv 并在 Python 中写入新的列?
- css - 带正文滚动的独立 div 滚动
- shopify - 如何将产品的颜色和样式标签存储在 Shopify 中的变量中?
- php - 引起:yii\base\ErrorException mkdir(): Permission denied - YII2
- opencv - 如何在opencv中获取mpeg文件格式
- c - 在嵌入式 C 编程中检查 GPIO 状态
- gitlab - 由于解包器错误,git push 不可能
- python - 如何创建包含空csv字段的dict作为None?