javascript - 使用 Ramda `range` 进行复制，但需要每隔 3 个插入一次(React)

Question

我目前正在使用 Ramda 为记录所具有的每个 perk 实例输出一个 Material-UI CheckCircle。它们最多可以有 18 个，因此我还使用它来继续计数超过福利，直到最大值 18 以显示潜在的最大值。

{R.range(0, this.props.perkProgress).map(() => <CheckCircle key={uid()} /> )}
            {R.range(this.props.perkProgress, 18).map(() => <CheckBoxOutline key={uid()} /> )}

这两行工作完美，但是我还需要在每“第三”行之后插入一些内容 - 相反，它是一个框或一个复选标记。因为我不相信我可以用 Ramda 来做，所以我怎样才能以正常的 JS 方式编写它(或将其包装在函数内；任一者)以获得我需要的输出？

this.props.perkProgress 始终是 0 到 18 之间的整数。

如果它们有“5”，我会期望有 5 个复选标记和 13 个空方 block 。

添加 terrible drawing当前运行部分的信息以及所需的最终结果:

Answer 1

这可以使用 Ramda 来实现，首先使用 R.splitEvery 拆分元素列表。然后使用 R.intersperse 在每个拆分列表之间添加分隔符最后用 R.unnest 将分割列表重新连接在一起.

(注意，为了简洁起见，我用下面的字符串替换了您的 JSX)

// inserts `sep` between every `n` elements of a list `xs`
const separateEvery = (sep, n, xs) =>
  R.unnest(R.intersperse([sep], R.splitEvery(n, xs)))

const genElements = (totalSize, progress) =>
  separateEvery('Separator', 3, R.concat(
    R.repeat('CheckCircle', progress),
    R.repeat('CheckBoxOutline', totalSize - progress)
  ))

console.log(genElements(18, 7))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

<小时/>

针对以下评论进行更新

<小时/>

向每个生成的元素添加键的一种方法是使用 React.cloneElement 映射每个元素。

const genElementsWithKey = R.pipe(
  genElements,
  R.addIndex(R.map)((el, key) => React.cloneElement(el, {key}))
)

或者，如果您出于某种原因不想使用 cloneElement，那么您可以使用 R.zipWith 替换 R.intersperse创建一个唯一的分隔符元素以插入到每组元素之间。

const createCircle = _ => '<CheckCircle key={uid()} />'
const createCheckBox = _ => '<CheckBoxOutline key={uid()} />'
const createSeparator = _ => '<Separator key={uid()} />'

const genElements = (totalSize, progress) => {
  const splitEls = R.splitEvery(3, R.concat(
    R.map(createCircle, R.range(0, progress)),
    R.map(createCheckBox, R.range(progress, totalSize))
  ))
  
  const firstSplitGroup = splitEls[0]
  const remainingSplitGroups = R.tail(splitEls)
  
  // create a list of separators matching the number of elements in remainingSplitGroups
  const separators = R.map(createSeparator, R.range(0, remainingSplitGroups.length))
  
  return R.concat(
    // keep the first split group as is
    firstSplitGroup,
    // prepend a separator to each of the remaining split groups
    R.unnest(R.zipWith(R.prepend, separators, remainingSplitGroups))
  )
}

console.log(genElements(18, 7))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>