动态分割数组

Question

我是ReactJS的新手。而且，如果我不对冗余做任何事情，我会发现我的代码很糟糕。我的阵列有一百个项目。映射它们会花费太多的行。给定类，我的代码如下：

{
   "lists": [
       {
          "item1": "Lorem",
          "item2": "Lorem",
          "item3": "Lorem"
       }, {
          "item1": "Lorem",
          "item2": "Lorem",
          "item3": "Lorem"
       }, {
          "item1": "Lorem",
          "item2": "Lorem",
          "item3": "Lorem"
       }, //...couple dozens more
   ]
}

render(){
   const lists = this.state.lists
   const list_a = lists.map((lists, i) => {
      return (
         <div key={i}>
            <div>
               <div>
                  <div>
                     <span>{lists.item1}</span>
                     <span>{lists.item2}</span>
                     <span>{lists.item3}</span>
                  </div>
               </div>
            </div>
         </div>
      )
   }).slice(0, 5)

   const list_b = lists.map((lists, i) => {
      return (
         <div key={i}>
            <div>
               <div>
                  <div>
                     <span>{lists.item1}</span>
                     <span>{lists.item2}</span>
                     <span>{lists.item3}</span>
                  </div>
               </div>
            </div>
         </div>
      )
   }).slice(5, 10)

   const list_b = lists.map((lists, i) => {
      return (
         <div key={i}>
            <div>
               <div>
                  <div>
                     <span>{lists.item1}</span>
                     <span>{lists.item2}</span>
                     <span>{lists.item3}</span>
                  </div>
               </div>
            </div>
         </div>
      )
   }).slice(10, 15)
}

如您所见，它看起来很荒谬。有没有一种方法可以某种方式操纵诸如“ .slice（0，n）”之类的切片？

Answer 1

写另一个子组件来完成这项工作：

const ChildList = ({ list }) => {
    return list.map((item, i) => {
        return (
            <div>
                {item.item1}
                {item.item2}
                {item.item3}
            </div>
        );
    }
}

然后您可以从父母那里打电话：

render () {
    const lists = this.state.lists;
    const chunk = 5;

    const slicedLists = lists.reduce((acc, item, index) => { 
      const chunkIndex = Math.floor(index/chunk);
      if(!results[chunkIndex]) {
        results[chunkIndex] = [] // start a new chunk
      }
      results[chunkIndex].push(item);
      return results;
    }, []);

    return (
        <div>
            {slicedLists.map((list, index) => {
                return (<ChildList key={index} list={list} />);
            })
        </div>
    );
};