Javascript reactjs、循环json、条件div

我不熟悉reactjs，它通过一组json循环，将提供一个页脚菜单

真的卡住了*这种外套要求的解决方案是什么

我需要重新创建的标记如下所示

<div class="row">     
        <div class="main-footer__left">
            <div class="row grid__row--offset--30">
                <div class="large-45 large-centered columns">
                    <h2 class="text--uppercase text--light-blue footer-text">Col</h2>   
                </div>
            </div>
        </div>

        <div class="main-footer__right">
            <div class="row grid__row--offset--30">

                <div class="large-14 large-offset-5 columns">
                    <h2 class="text--uppercase text--light-blue footer-text">Col</h2>   
                </div>
                <div class="large-1 columns">
                    <div class="vert-line--light-blue"></div>
                </div>


                <div class="large-14 large-offset-5 columns">
                    <h2 class="text--uppercase text--light-blue footer-text">Col</h2>   
                </div>
                <div class="large-1 columns">
                    <div class="vert-line--light-blue"></div>
                </div>


                <div class="large-14 large-offset-5 columns">
                    <h2 class="text--uppercase text--light-blue footer-text">Col</h2>                    
                </div>

            </div>

            <div class="row grid__row--offset--30">
                <div class="large-15 large-centered columns">
                    <p class="text--white text--center footer-text">FIXED</p>
                </div>
            </div>
        </div>
    </div>

上校
上校
上校
上校
已修复

因此，在0索引上——需要用“left”类覆盖col——从索引1开始——需要将所有其他项封装在“right”类中

我当前的reactjs代码看起来是这样的——但我正在努力添加外套

    {
      lang.menu.map(function (item, index) {
        return (
          {
            index === 0 ? <div className='main-footer__left' /> : null
          }
        {/*
        <div key={index} className='large-14 large-offset-5 columns'>
          <h2 className='text--uppercase text--light-blue footer-text'>{item.title}</h2>
          {
            item.switch
              ? <p className='text--white grid__row--offset--15 footer-text'>
                {
                  item.children.map(function (child, j) {
                    return (
                      <Link key={j} className={'text--white footer-text transition ' + (props.active_language === child.title.toString().toLowerCase() ? activeLang : alternativeLang)} to={urls[j]}>{child.title}</Link>
                    )
                  })
                }
              </p>
              : item.children.map(function (child, j) {
                return (
                  <div key={j} className={(j === 0 ? ' grid__row--offset--15' : '')}>
                    <Link className='text--white footer-text transition' to={child.link}>{child.title}</Link>
                  </div>
                )
              })
          }
        </div>
        */}
        )
      })
    }

{
lang.menu.map（函数（项、索引）{
返回(
{
索引===0？：空
}
{/*
{item.title}
{
item.switch
？

{
项.子项.映射（函数（子项，j）{
返回(
{child.title}
)
})
}

：item.children.map（函数（child，j）{
返回(
{child.title}
)
})
}
*/}
)
})
}

您的需求很难理解，但您应该能够采用这种方法来实现您想要的。您可能需要对

内容

进行一些调整，但这种结构应该适合您：

    {
      lang.menu.map(function (item, index) {
        const content =
        <div key={index} className='large-14 large-offset-5 columns'>
          <h2 className='text--uppercase text--light-blue footer-text'>{item.title}</h2>
          {
            item.switch
              ? <p className='text--white grid__row--offset--15 footer-text'>
                {
                  item.children.map(function (child, j) {
                    return (
                      <Link key={j} className={'text--white footer-text transition ' + (props.active_language === child.title.toString().toLowerCase() ? activeLang : alternativeLang)} to={urls[j]}>{child.title}</Link>
                    )
                  })
                }
              </p>
              : item.children.map(function (child, j) {
                return (
                  <div key={j} className={(j === 0 ? ' grid__row--offset--15' : '')}>
                    <Link className='text--white footer-text transition' to={child.link}>{child.title}</Link>
                  </div>
                )
              })
          }
        </div>;
        if(index === 0){
            return (
                <div className='main-footer__left'>
                  {content}
                </div>
            )
        }else{
            return (
                <div className='main-footer__right'>
                  {content}
                </div>
            )
        }
      });
    }

{
lang.menu.map（函数（项、索引）{
常量内容=
{item.title}
{
item.switch
？

{
项.子项.映射（函数（子项，j）{
返回(
{child.title}
)
})
}

：item.children.map（函数（child，j）{
返回(
{child.title}
)
})
}
;
如果（索引==0）{
返回(
{content}
)
}否则{
返回(
{content}
)
}
});
}

我不确定我是否100%理解您的要求，但如果我读对了，听起来第一项应该用

包装，其余的应该用

包装。假设情况一直如此，您可以执行以下操作：

renderItem(item) {
    return (
      <div className='large-14 large-offset-5 columns'>
        <h2 className='text--uppercase text--light-blue footer-text'>{item.title}</h2>
        {
          item.switch
            ? <p className='text--white grid__row--offset--15 footer-text'>
              {
                item.children.map(function (child, j) {
                  return (
                    <Link key={j} className={'text--white footer-text transition ' + (props.active_language === child.title.toString().toLowerCase() ? activeLang : alternativeLang)} to={urls[j]}>{child.title}</Link>
                  )
                })
              }
            </p>
            : item.children.map(function (child, j) {
              return (
                <div key={j} className={(j === 0 ? ' grid__row--offset--15' : '')}>
                  <Link className='text--white footer-text transition' to={child.link}>{child.title}</Link>
                </div>
              )
            })
        }
      </div>
    );
  }

render() {
    return (
      <div>
        <div class="main-footer__left">
          { this.renderItem(lang.map[0]) }
        </div>

        <div className="main-footer__right">
          { lang.menu.map((item, index) => index > 0 && this.renderItem(item))}
        </div>
      </div>
    );
}

renderItem（项目）{
返回(
{item.title}
{
item.switch
？

{
项.子项.映射（函数（子项，j）{
返回(
{child.title}
)
})
}

：item.children.map（函数（child，j）{
返回(
{child.title}
)
})
}
);
}
render（）{
返回(
{this.renderItem（lang.map[0]）}
{lang.menu.map（（项，索引）=>index>0&&this.renderItem（项））}
);
}

---

使用

renderItem

方法是为了避免重复任何代码。就我个人而言，我会将其作为一个单独的组件，称为FooterItem之类的东西，可以调用它来代替

this.renderItem（）

您似乎并不陌生。你的问题可以追溯到将近一年前。还在学习。在循环中创建这种外套的最佳方法是什么？这里有什么建议吗？真的很难理解-有没有办法修改我的数组中的推送？我在你的问题中根本没有看到一个

push（）

。-有没有办法修改我的数组中的推送？你是什么意思？我在您在问题中发布的代码片段中没有看到任何

.push（）

。