#javascript #reactjs
#javascript #reactjs
Вопрос:
У меня есть этот цикл for в React, который перебирает ограниченное количество элементов и создает JSX на основе этого, моя функция рендеринга выглядит следующим образом:
public render(): React.ReactElement<ITilesProps> {
let numOfColumns = 2;
let items = this.state.items;
let rowsJsx = []
let initCounter = items.length - numOfColumns;
let jumper = initCounter > 0 ? numOfColumns : items.length;
for (let i = 0; i < items.length; i = jumper) {
let rowJsx = []
let limit = (i jumper - 1) >= items.length ? items.length - 1 : (i jumper - 1)
for (let j = i; j <= limit; j ) {
let props = {
previewImages: [
{
url: items[j].EncodedAbsUrl,
previewImageSrc: items[j].EncodedAbsUrl,
imageFit: ImageFit.cover,
width: 318,
height: 196
}]
}
rowJsx.push(<SingleCardContainer><DocCard previewImageProps={props} ></DocCard></SingleCardContainer>)
}
rowsJsx.push(<TileRow>{rowsJsx}</TileRow>)
}
return (
<div className="ms-Grid" dir="ltr">
{rowsJsx}
</div>
)
}
То, что я создаю, — это строка плиток, первый цикл перебирает элементы и пропускает количество плиток в каждой строке, второй цикл перебирает плитки в каждой строке, создает для нее JSX и добавляет ее в массив плиток в каждой строке, который, в свою очередь, добавляется в массив JSX всех строк.
Есть идеи, почему это может выдавать ошибку?
Спасибо.
Комментарии:
1.
rowsJsx.push(<TileRow>{rowsJsx}</TileRow>)Это похоже на потенциального кандидата. У меня такое чувство, что вы хотели поместить{rowJsx}туда вместо этого.2. @Keith у каждой строки должна быть оболочка (например, bootstrap), Которая содержит класс для ширины и т.д. итак, это компонент TileRow, и туда я хочу добавить все строки, которые у меня были
3. О да, я только что заметил, что @Keith спасибо, что указал на это.
4. Вы хотели бы опубликовать это в качестве ответа?
Ответ №1:
Похоже, это была просто опечатка.. Сделано просто.
rowsJsx.push(<TileRow>{rowsJsx}</TileRow>)
В приведенном выше примере вы случайно добавили rowsJsx вместо rowJsx , поэтому ваши накопленные строки добавляются каждый раз.
rowsJsx.push(<TileRow>{rowJsx}</TileRow>)