Как реализовать each_slice в rails-реагировать представления?

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

Uncaught TypeError: Cannot read property 'team' of undefined

Кто-нибудь может мне помочь?

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