Question

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

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

Answer 1

React希望您返回一个React组件。你不能分裂＆＃34;一个React组件并返回一个适合的结束标记。

你在这里做的是提醒你在php这样的语言中做的那种逻辑，你只需echo文本中的html元素。在php中有效，因为html在运行时被解析并且不需要编译。 React的情况并非如此。

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

＆＃13;

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      arr: [1, 2, 3, 4, 5, 6],
      chunkSize: 3
    };
  }
  
  renderGroups() {
    let a = this.state.arr.reduce((acc, item, idx) => {
      let group = acc.pop();
      if (group.length == this.state.chunkSize) {
        acc.push(group);
        group = [];
      }
      group.push(item);
      acc.push(group);
      return acc;
    }, [[]]);
    
    return a.map((item) => {
      return (
        <div key={item} className='row'>
          {item.map(x => <div className='medium-18 medium-offset-2 columns'>{x}</div>)}
        </div>
      );
    });
  }
  
  render() {
    return (
      <div>
        {this.renderGroups()}
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

＆＃13;

.row {
  background: red;
  border: 1px solid black;
  margin: 2px;
}

.columns {
  display: inline-block;
  background: white;
  margin: 2px;
  padding: 0 4px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

有关reduce()内部情况的详细说明，请查看我之前的答案，here。

Answer 2

在jsx中编写的每个Html like标签都转换为普通的javascript。在您的代码中，Jsx元素被破坏，因为<div>不是有效元素。它应该是<div/>或<div></div>

您可以将数据分组到地图缩减链中，如下所示：

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

reactjs模数不起作用

2 个答案: