为数组中的每 12 个项目添加一个类名，跳过前 14 个项目和最后 14 个项目？

Question

我想在我的 div 中添加一个“分页符”类名，当每 12 个元素像 12、24、48 一样传入数组时...应该跳过第一个和最后一个 14 个元素。

{orderData.map((el, i) => {
  let condition = i >= 14 && i % 12 === 0; // how to write the condition here ?
  return (
    <tr className={`item ${condition && "pagebreak"}  `}>
      // ... 
    </tr>
  )
})}

Answer 1

 {orderData.map((el, i) => {
            
           if(i >14 && i% 12 ===0 && i < orderData.length - 14 ){
            return (
              <tr className={`... `}>
              )
         }
      return (
              <tr >
              )
})

Answer 2

设置一个page-breakclass-name的条件如下...

const isPageBreak =
  ((idx + 1) % 12 === 0) && // - every 12th item ... except for ...
  (idx >= 13) &&            // - skip first 14 items.
  (idx < arr.length - 14);  // - skip last 14 items.

测试代码...

console.log([

    1,2,3,4,5,6,7,8,9,10,
    11,12,13,14,15,16,17,18,19,20,
    21,22,23,24,25,26,27,28,29,30,
    31,32,33,34,35,36,37,38,39,40,
    41,42,43,44,45,46,47,48,49,50,
    51,52,53,54,55,56,57,58,59,60,61,
  //62,
  
  ].map((item, idx, arr) => {
    const isPageBreak =
      ((idx + 1) % 12 === 0) && // - every 12th item ... except for ...
      (idx >= 13) &&            // - skip first 14 items.
      (idx < arr.length - 14);  // - skip last 14 items.

    return item + (isPageBreak ? ' :: pagebreak' : '');
  })
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

为数组中的每 12 个项目添加一个类名，跳过前 14 个项目和最后 14 个项目？

add a className for every 12th item in array skipping first 14 items and last 14 items?

javascript

arrays

jsx

conditional-statements

reactjs