javascript - 如何在 rails-react 视图中实现 each_slice？

Question

我有父组件 Monsters，我在那里渲染 Monster 组件。

for monster in @state.monsters
      React.createElement Monster, key: monster.id, monster: monster, team: @state.team...

内部怪物：

div className: 'col-md-4',
  hr {}
  img
    className: 'img-responsive img-circle thumbnail'

……

问题有一个引导列和行，它的中断。我需要像每个切片这样的方法，将每个（3）对象包装到引导行中。我使用了 lodash _chunk 和自定义 Array.prototype 变体，但是在这个循环中反应变量不可用。

Array::each_slice = (size, callback) ->
  i = 0
  l = @length
  while i < l
    callback.call this, @slice(i, i + size)
    i += size

这是每个切片的功能，然后我做这个。

@state.array.each_slice 3, (slice) ->
  for component in slice
    React.createElement Monster, key: component.id, monster: component, team: @state.team etc....

未捕获的类型错误：无法读取未定义的属性“团队”

有谁能够帮我？

Answer 1

回调@内部的值不同。each_slice要查看差异，请尝试以下操作：

console.log(@) # `@` is the React component
@state.array.each_slice 3, (slice) =>
  console.log(@) # `@` is `window`, the global object
  for component in slice
    React.createElement Monster, team: @state.team # ...

要保留@回调中的值，请使用“胖箭头”（=>），如下所示：

console.log(@) # the React component
@state.array.each_slice 3, (slice) =>
  console.log(@) # still the React component :)
  for component in slice
    React.createElement Monster, team: @state.team # ...