Вставьте изображение через каждый элемент x в React
У меня есть список элементов, и мне нужно визуализировать изображение между каждыми 10 элементами. Элементы должны отображаться в 2-мерной сетке, изображение должно отображаться в новой строке.
Я мог перечислить элементы с помощью карты, я подумал проверить индекс, если он делится на 10, мы можем добавить изображение, но это не сработало.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это одно из решений, которое, я думаю, вы можете использовать:
<div id = "container" style = {{display: 'flex', flexDirection: 'row', flexWrap: 'wrap'}}>
{arrayList.map((listItem, index) => {
const cardinalIndex = index + 1;
const item = !(cardinalIndex % 10) ? (
<React.Fragment>
<div id = "item" style = {{flex: '1 1 25%'}}>
{listItem}
</div>
<img style = {{flex: '1 1 100%'}} src = "" />
</React.Fragment>
) : (
<div id = "item" style = {{flex: '1 1 25%'}}>
{listItem}
</div>
);
return item;
})}
@NadaGhanem Была такая же идея, но мне интересно, чем ваш код отличается от моего
это очень похоже. Теперь изображение отображается как элемент, интересно, как его поместить в новую строку!
За пределами div #container?
он должен быть внутри, но в новой строке (как на изображении выше), я не знаю, возможно ли это.
С этим кодом есть пара проблем. 1. Вы визуализируете изображение вместо элемента и нет между ними. 2. Item - это параметр функции карты, который также переопределяется внутри.
Я считаю, что это достигается с помощью flexbox, не знаю, как вы обрабатываете CSS.
Приведенный выше код заменяет каждый 10-й элемент изображением, что неверно, элемент должен быть там !.
Ага! спасибо @Peter, я исправил это, также нада пример также показывает, как использовать flexbox для выполнения макета на вашем изображении
Этот код неверен, он заменяет каждый 10-й элемент вместо того, чтобы вставлять новый, пожалуйста, ознакомьтесь с моим решением, оно работает, и я предоставлю вам пример
Я изменил его, чтобы не заменять элемент изображением, он его добавляет ... @ h-des ваш ответ написан без синтаксиса JSX или с использованием функций ES5 React
@Benjamin, спасибо большое !. Впервые узнать о фрагменте React !.
Он не предоставил никакого кода, поэтому я просто дал ему простой алгоритм.
//itemList is your array
let temp = [];
while (itemList.length > 0) {
temp.push(itemList.splice(0, 10));
}
let res = [];
temp.forEach(e => {
res = [...res, ...e, 'new item here'];
});
//res is your output array with inserted elements
А вот рабочий пример: https://jsfiddle.net/tkr1d8vg/
Спасибо, @ h-des, протестирую с реакцией, может есть способ попроще!
Вы что-нибудь пробовали?