Как выполнить JS в JSX (React), не выводя его как HTML?
Как бы вы собрали этот html с помощью jsx / react. Моя проблема в том, что i++ всегда выводится как часть html, хотя я бы предпочел это выполнить.
const rows = [];
for (let i = 0; i < items.length; i++) {
let row;
if (i + 1 < items.length) {
// on all but the last item we have to items in a row
row = (
<div className = "bpa-module-tile-row">
{this.getItem(items[i])}
i++;
{this.getItem(items[i])}
)
</div>
);
} else {
// if we have an odd number of items, then the last row has only one not two items in a rowj
row = (
<div className = "bpa-module-tile-row">{this.getItem(items[i])}</div>
);
}
rows.push(row);
}
Затем rows выводятся позже с использованием {rows} в jsx. Проблема в том, что результат i++ также попадает в HTML. Мне кажется, что я "думаю" или подхожу к этому неправильно.
Как я могу написать это на идиоматическом JSX?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Array.prototype.map () будет перебирать список и создавать другой список, применяя функцию, которую вы ему предоставляете.
Что-то похожее на это то, что вы ищете:
const items = [1,2,3,4,5]
const rows = items.map((_, index) => index % 2 ? [] : items.slice(index, index + 2))
.filter(row => row.length > 0)
.map(row =>
(<div className = "bpa-module-tile-row">
{row.map(x => "Item " + x)}
</div>)
);
Попробуйте: Скрипка JS
Если вы можете импортировать (или напиши свой) метод кусок, тогда это станет еще проще:
const rows = chunk(items, size=2)
.map(row =>
(<div className = "bpa-module-tile-row">
{row.map(x => "Item " + x)}
</div>)
);
Я немного запутался. Кажется, в вашем примере вы поддерживаете только один индекс. Я немного отредактировал свой ответ, чтобы попытаться угадать, что вы ищете, но если вы можете предоставить более подробную информацию, я могу помочь дальше.
И что делает getItem? Кажется довольно запутанным передавать item этому
Это будет повторять пункты. Первый div будет содержать элементы с индексами 0 и 1, следующий div будет содержать элементы с индексами 1 и 2 и т. д. Исходный код выводит элементы с номерами 0 и 1, затем элементы с номерами 2 и 3 и т. д.
Отредактировано, чтобы избежать дублирования.
@ ᴘᴀɴᴀʏɪᴏᴛɪs +1, потому что он работает, и это действительно самый нелепый код :) (но я приму другой ответ)
@nachtigall Ничто не сравнится с удобочитаемостью добавления вспомогательного метода :) (см. мою правку)
Вы можете просто использовать i ++ где угодно в фигурных скобках. Ваш объект строки должен быть таким:
row = (
<div className = "bpa-module-tile-row">
{this.getItem(items[i++])}
{this.getItem(items[i])}
)
</div>
);
Что ж, я не сторонник этих «скрытых» операторов i ++. Действительно легко не заметить. Я бы предпочел, чтобы i ++ был выражением в одной строке.
Одно из решений - увеличить счетчик на 2 и рассчитать каждый индекс соответствующим образом:
const rows = [];
for (let i = 0; i < items.length; i += 2) {
let row;
if (i + 1 < items.length) {
// on all but the last item we have to items in a row
row = (
<div className = "bpa-module-tile-row">
{this.getItem(items[i])}
{this.getItem(items[i+1])}
)
</div>
);
} else {
// if we have an odd number of items, then the last row has only one not two items in a rowj
row = (
<div className = "bpa-module-tile-row">{this.getItem(items[i])}</div>
);
}
rows.push(row);
}
Да, это устранение основной причины, следовательно, самое чистое решение. Спасибо!
Я не могу попробовать банкомат, но почему бы не добавить индекс в строку? Этого я хочу избежать. Кроме того, мне нужно обработать 2 индекса одновременно, если это не последний и нечетный индекс.