我是reactjs的新手，我的json有一些嵌套数组，需要用条件复制静态标记，因为我循环通过json。
我已经看到一些使用.reduce的方法，并在达到特定模数后将数据推送到嵌套数组中。
如何添加所需的包装以匹配/镜像静态标记？
//这是我到目前为止所拥有的
{
lang.contact[0].groups.map(function (item, index) {
return (
<div className='row grid__row--offset--30' key={index}>
<div className='medium-8 small-15 small-centered medium-uncentered columns'>
<img className='icn__large centered' src={item.image} alt='illustrated skyscraper' />
</div>
{
item.children.map(function (list, j) {
return (
<div key={j} className='medium-22 small-60 small-centered medium-uncentered columns'>
<h3 className='text--white text--center--small paragraph-margin-bottom-10'>{list.title}</h3>
{
list.listings.map(function (sublist, k) {
return (
<p key={k} className='text--white text--center--small'>{sublist}</p>
)
})
}
</div>
)
})
}
<div className='small-15 small-centered columns show-for-small-only'>
<div className='relative-container-40' />
<div className='hor-line--thin--red' />
</div>
</div>
)
})
}
// JSON
"contact" : [
{
"title" : "Impressum",
"groups" : [
{
"children": [
{
"title": "Firma",
"listings": [
"e-profound GmbH"
]
}
],
"image" : "/img/home/imprint_icn_06.png"
},
{
"children": [
{
"title": "Email",
"listings": [
"info@e-profound.com"
]
}
],
"image" : "/img/home/imprint_icn_01.png"
},
{
"children": [
{
"title": "Adresse",
"listings": [
"Grillparzerstrasse 37a",
"81675 München",
"Deutschland"
]
}
],
"image" : "/img/home/imprint_icn_02.png"
},
{
"children": [
{
"title": "Handelsregister",
"listings": [
"HRB 209728"
]
},
{
"title": "Umsatzsteuer-Ident-Nummer",
"listings": [
"DE293534729"
]
}
],
"image" : "/img/home/imprint_icn_05.png"
},
{
"children": [
{
"title": "Management",
"listings": [
"Isidora Dekalo-Baron",
"Alexander Baron"
]
},
{
"title": "Responsible for the content",
"listings": [
"Isidora Dekalo-Baron",
"Alexander Baron"
]
}
],
"image" : "/img/home/imprint_icn_03.png"
}
]
}
]
//原始标记
<div class="small-56 columns small-centered">
<!-- first row -->
<!-- ********************************************************* -->
<div class="row grid__row--offset--30 ">
<div class="medium-8 small-15 small-centered medium-uncentered columns">
<img class="icn__large centered" src="/img/home/imprint_icn_06.png" alt="illustrated skyscraper">
</div>
<div class="medium-22 small-60 small-centered medium-uncentered columns">
<h3 class="text--white text--center--small paragraph-margin-bottom-10">Company name</h3>
<p class="text--white text--center--small">e-profound GmbH</p>
</div>
<div class="small-15 small-centered columns show-for-small-only">
<div class="relative-container-40"></div>
<div class="hor-line--thin--red"></div>
</div>
<!-- divider line small only -->
<div class="small-60 columns show-for-small-only">
<div class="relative-container-40"></div>
</div>
<!-- divider row small only -->
<div class="medium-8 small-15 small-centered medium-uncentered columns">
<img class="icn__large centered" src="/img/home/imprint_icn_01.png" alt="illustrated paper plane with airmail markings">
</div>
<div class="medium-22 small-60 small-centered medium-uncentered columns">
<h3 class="text--white text--center--small paragraph-margin-bottom-10">E-mail</h3>
<p class="text--white text--center--small">info@e-profound.com</p>
</div>
<div class="small-15 small-centered columns show-for-small-only">
<div class="relative-container-40"></div>
<div class="hor-line--thin--red"></div>
</div>
<!-- divider line small only -->
</div><!--row end -->
<!-- second row -->
<!-- ********************************************************* -->
<div class="row grid__row--offset--30">
<div class="medium-8 small-15 small-centered medium-uncentered columns">
<img class="icn__large centered" src="/img/home/imprint_icn_02.png" alt="illustrated waypoint">
</div>
<div class="medium-22 small-60 small-centered medium-uncentered columns">
<h3 class="text--white text--center--small paragraph-margin-bottom-10">Address</h3>
<address>
<p class="text--white text--center--small">Grillparzerstrasse 37a</p>
<p class="text--white text--center--small">81675 Munich</p>
<p class="text--white text--center--small">Germany</p>
</address>
</div>
<div class="small-15 small-centered columns show-for-small-only">
<div class="relative-container-40"></div>
<div class="hor-line--thin--red"></div>
</div>
<!-- divider line small only -->
<div class="small-60 columns show-for-small-only">
<div class="relative-container-40"></div>
</div>
<!-- divider row small only -->
<div class="medium-8 small-15 small-centered medium-uncentered columns">
<img class="icn__large centered" src="/img/home/imprint_icn_05.png">
</div>
<div class="medium-22 small-60 small-centered medium-uncentered columns">
<div class="row">
<div class="small-60 columns">
<h3 class="text--white text--center--small paragraph-margin-bottom-10">Commercial register</h3>
<p class="text--white text--center--small paragraph-margin-top-5">HRB 209728</p>
</div>
</div>
<div class="row grid__row--offset--15">
<div class="small-60 columns">
<h3 class="text--white text--center--small paragraph-margin-bottom-10">VAT ID number:</h3>
<p class="text--white text--center--small">DE293534729</p>
</div>
</div>
</div>
</div>
<!--row end-->
<div class="small-15 small-centered columns show-for-small-only">
<div class="relative-container-40"></div>
<div class="hor-line--thin--red"></div>
</div>
<!-- divider line small only -->
<!-- third row -->
<!-- ********************************************************* -->
<div class="row grid__row--offset--30">
<div class="medium-8 small-15 small-centered medium-uncentered columns">
<img class="icn__large centered" src="/img/home/imprint_icn_03.png">
</div>
<div class="medium-22 small-60 small-centered medium-uncentered columns">
<div class="row">
<div class="small-60 columns">
<h3 class="text--white text--center--small paragraph-margin-bottom-10">Management</h3>
<p class="text--white text--center--small paragraph-margin-top-5">Isidora Dekalo-Baron</p>
<p class="text--white text--center--small">Alexander Baron</p>
</div>
</div>
<div class="row grid__row--offset--15">
<div class="small-60 columns">
<h3 class="text--white text--center--small paragraph-margin-bottom-10">Responsible for the content</h3>
<p class="text--white text--center--small paragraph-margin-top-5">Isidora Dekalo-Baron</p>
<p class="text--white text--center--small">Alexander Baron</p>
</div>
</div>
</div>
<div class="small-15 small-centered columns show-for-small-only">
<div class="relative-container-40"></div>
<div class="hor-line--thin--red"></div>
</div>
<!-- divider line small only -->
<div class="small-60 columns show-for-small-only">
<div class="relative-container-40"></div>
</div>
<!-- divider row small only -->
</div>
<!-- row large & medium -->
</div>