Question

我是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索引上 - 需要用＆＃34; left＆＃34;来打开col。 class - 来自索引1 - 需要将所有其他项包装在＆＃34; right＆＃34;类

我当前的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>
        */}
        )
      })
    }

Answer 1

您的要求很难理解，但您应该能够采用这种方法来实现您想要的目标。您可能需要对content进行一些调整，但此结构应该适合您：

    {
      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>
            )
        }
      });
    }

Answer 2

我不确定我是否100％理解您的要求，但如果我正确地阅读它，听起来第一个项目应该用<div class="main-footer__left">包裹，其余的用<div class="main-footer__right">包裹。假设总是这样，你可以做类似的事情：

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方法是为了避免重复任何代码。就个人而言，我会将其作为一个单独的组件，称为FooterItem，可以代替this.renderItem()调用。

reactjs，循环json，条件div

2 个答案: