Question

我有父组件怪物，我在那里渲染怪物组件。

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'

...

问题是有一个bootstrap列和行，它的中断。我需要像每个切片一样的方法，将每个（3）对象包装到bootstrap行中。我使用了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....

未捕获的TypeError：无法读取属性＆＃39; team＆＃39;未定义的

有人能帮助我吗？

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 # ...

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

1 个答案: