Следование шаблону при рендеринге предметов
Амперсанд используется в двух разных значениях в C ++: получение адреса чего-либо (например, переменной или функции) и указание параметра или параметра функции для ссылки на сущность, определенную где-то еще. В вашем примере последнее значение используется.
C не имеет строго говоря ничего подобного ссылке, но указатели (или указатели на указатели) были пользователем в течение многих лет для подобных вещей.
См., например, http://www.cprogramming.com/tutorial/references.html , В чем разница между переменной-указателем и ссылочной переменной в C ++? или http : //en.wikipedia.org/wiki/Reference_%28C%2B%2B%29 для получения дополнительной информации о ссылках на C ++.
1 ответ
Вы почти на месте, вы можете добавить индекс i на карту и посмотреть, находимся ли мы в нечетной или четной строке. Если нечетное, то i % 2 будет оставлено 1, и вы можете выбрать, какой класс добавить, основываясь на этом логическом значении.
renderRecipes() {
return this.state.recipes.map((recipe,i) => (
<div class="row">
//col should be changed here, once col-4 and in the next col-3, and to keep the pattern going
<div class="{i % 2 === 1 ? 'col-3':'col-4'}">
<img src={recipe.img}/>
<h3>{recipe.name}</h3>
</div>
</div>
));
}
Правка Bootstrap перенесет col с, превышающих строку, на следующую строку. Вы можете использовать это для печати всех col по горизонтали, и они будут перенесены на правильные строки. Вам просто нужно найти математику, которая определит, находитесь ли вы в ряду с 3 или 4 промежутками.
renderRecipes() {
let isThree = function(i){
//Here add algorithm to determine if you are in a 3 row or a 4 row.
}
return (
<div class="row">
this.state.recipes.map((recipe,i) => (
<div class="{isThree(i) ? 'col-3':'col-4'}">
<img src={recipe.img}/>
<h3>{recipe.name}</h3>
</div>
));
</div>
)
}