reactjs-json和模板中的嵌套循环
我是reactjs新手，我有一些json，它有一些嵌套数组，需要在循环json时用条件复制静态标记 我见过一些使用的方法。在达到特定模数后，减少数据并将其推入嵌套数组 如何添加所需的包装以匹配/镜像静态标记 //这就是我目前所拥有的reactjs-json和模板中的嵌套循环,json,reactjs,Json,Reactjs,我是reactjs新手，我有一些json，它有一些嵌套数组，需要在循环json时用条件复制静态标记 我见过一些使用的方法。在达到特定模数后，减少数据并将其推入嵌套数组 如何添加所需的包装以匹配/镜像静态标记 //这就是我目前所拥有的 { lang.contact[0].groups.map(function (item, index) { return ( <div className='row grid__row--offset--
{
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>
)
})
}
<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>
公司名称
e-Decept GmbH
电子邮件
info@e-深奥网
地址
Parzerstrasse 37a格栅
81675慕尼黑
德国
商业登记
HRB 209728
增值税识别号：
DE293534729
管理层
伊西多拉·德卡洛男爵
亚历山大·巴伦
负责内容
伊西多拉·德卡洛男爵
亚历山大·巴伦
<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>