Reactjs 反应器不工作

我在reactjs组件中循环一组项目。我试图每3个项目将项目包装在一个div中

            {
              lang.carouselFeatures[0].items.map(function (item, index) {
                return (
                  {
                    index % 3 === 0
                      ? <div className='row'>
                      : null
                  }
                  <div key={index} className='medium-18 medium-offset-2 columns'>
                    <a rel='nofollow' href='#page-01-med'>
                      <div className='relative-container'>
                        <img className='icn__large icn--no-margin-bottom centered' src={Thumb1} />
                        <div className='icn--hover__features' />
                      </div>
                      <p className='text--center paragraph-margin-top-10'>Live Video Interviews</p>
                    </a>
                  </div>
                  {
                    index % 3 === 0
                      ? </div>
                      : null
                  }
                )
              })
            }

{
lang.carouselFeatures[0].items.map（函数（项，索引）{
返回(
{
索引%3==0
? 
：null
}
{
索引%3==0
? 
：null
}
)
})
}

我试图重新创建这个静态标记，因此如果不是第一个系列，还需要向包装器添加一个额外的类。欢迎回答/建议

///固定的

    {
     lang.carouselFeatures[0].items.reduce((m, k, i) => {
       if (i % 3 === 0) {
         m.push([k])
       } else {
         m[m.length - 1].push(k)
       }
       return m
     }, []).map((grouped, index) => (
       <div key={index} className='row'>
         {
           grouped.map((item, j) =>
             <div key={j} className='medium-18 medium-offset-2 columns'>
               <a rel='nofollow' href='#page-01-med'>
                 <div className='relative-container'>
                   <img className='icn__large icn--no-margin-bottom centered' src={item.image} />
                   <div className='icn--hover__features' />
                 </div>
                 <p className='text--center paragraph-margin-top-10'>{item.title}</p>
               </a>
             </div>
            )
         }
       </div>
      ))
    }

{
lang.carouselFeatures[0]。items.reduce（（m，k，i）=>{
如果（i%3==0）{
m、 推送（[k]）
}否则{
m[m.长度-1]。推力（k）
}
返回m
}，[]）.map（（分组，索引）=>(
{
分组。映射（（项目，j）=>
)
}
))
}

React希望您返回React组件。不能“拆分”React组件并在合适的位置返回结束标记

您在这里所做的事情提醒了您在诸如

php

之类的语言中所做的逻辑，您只需

echo

文本中的html元素。在

php

中，由于html是在运行时解析的，不需要编译，所以它可以工作。React的情况并非如此

相反，您需要一次返回一个组件，为此，您需要一个稍微复杂一些的算法。我在这里使用：

MyApp类扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ arr:[1,2,3,4,5,6]， 大小：3 }; } renderGroups（）{ 设a=this.state.arr.reduce（（acc，item，idx）=>{ 让组=根据pop（）； if（group.length==this.state.chunkSize）{ acc.push（组）； 组=[]； } 组.推（项）； acc.push（组）； 返回acc； }, [[]]); 返回a.map（（项目）=>{ 返回( {item.map（x=>{x}} ); }); } render（）{ 返回( {this.renderGroups（）} ); } } ReactDOM.render（，document.getElementById（“app”）

.row{
背景：红色；
边框：1px纯黑；
保证金：2倍；
}
.栏目{
显示：内联块；
背景：白色；
保证金：2倍；
填充：0.4px；
}

---

用jsx编写的每个类似Html的标记都被转换为纯javascript。在代码中，Jsx元素被破坏，因为

不是有效的元素。它应该是

或

您可以在map reduce链中将数据分组，如下所示：

{ 
 lang.carouselFeatures[0].items.reduce((m,k,i)=>{
  if(i%3==0){ 
     m.push([k]) 
  }else{ 
     m[m.length-1].push(k) 
  }
  return m;
 },[]).map(grouped=>(<div>{grouped}</div>))
}

{
lang.carouselFeatures[0]。items.reduce（（m，k，i）=>{
如果（i%3==0）{
m、 推送（[k]）
}否则{
m[m.length-1]。推力（k）
}
返回m；
}，[]）.map（分组=>（{grouped}））
}

它在%处抛出了一个错误“Unexpected token”这里有没有一个更简单的方法——修改我前面的示例——我得到了一个json多维数组here@TheOldCounty这是我所知道的最简单的解决办法。它只有9行代码…我在映射项时遇到了一个问题--你看到我上面的答案了吗？我曾尝试访问grouped/items变量，但在上面的示例中它失败了我曾尝试访问grouped var，但在上面的示例中它失败了我忘了拆分grouped array。您需要在分组中使用第二个贴图。用小提琴编辑代码。请检查以下内容：