У меня есть два массива, которые содержат целое число и такие строки.
let intArr = [4,3,2,1]
let player = ['a','b','c','d','e','f','g','h','i','j']
и сумма intArr всегда будет такой же, как длина игрока
как мне вернуть div столько же, сколько каждое число в intArr со значением игрока внутри div
ожидал :
поскольку индекс intArr 0 равен 4, первый div должен быть таким
<div>
<div> a </div>
<div> b </div>
<div> c </div>
<div> d </div>
</div>
а затем для индекса 1 intArr, который равен 3, он должен возвращаться следующим образом
<div>
<div> e </div>
<div> f </div>
<div> g </div>
</div>
и так далее
Вы спрашиваете, как использовать циклы? Вы спрашиваете, как создавать элементы с помощью Javascript? Вы спрашиваете, как найти индекс массива? Что вы пробовали и с чем у вас возникли проблемы? Что вы имеете в виду "вернуть div"?
Я пытаюсь вернуть компонент реакции с div внутри него и спрашиваю, как связать два массива вместе, чтобы он мог получить значение так же, как я поставил ожидаемый результат в вопросе. извините за путаницу
Если я правильно понимаю, intArr
определяет длину среза или чанка для каждой группы в player
.
Вы можете получить желаемый результат, как это...
let offset = 0;
const slices = [];
for (const len of intArr) {
slices.push(player.slice(offset, offset + len);
offset += len;
}
Вы можете повторить это в JSX, чтобы получить свои div...
{slices.map((slice, sliceIndex) => (
<div key = {sliceIndex}>
{slice.map((p, pIndex) => (
<div key = {pIndex}>{p}</div>
))}
</div>
))}
Если player
и intArr
являются значениями состояния, вы можете обернуть это в хук для заметок, чтобы он пересчитывал при изменении состояния.
const slices = useMemo(() => {
let offset = 0;
const arr = [];
for (const len of intArr) {
arr.push(player.slice(offset, offset + len);
offset += len;
}
return arr;
}, [player, intArr]);
Сначала нам нужно сгруппировать ваши письма:
let intArr = [4,3,2,1]
let player = ['a','b','c','d','e','f','g','h','i','j']
let acc = 0
const groups = intArr.map(len => {
acc += len
return player.slice(acc - len, acc)
})
groups
теперь имеет значение [['a','b','c','d'],['e','f','g'],['h','i'],['j']]
Затем мы просто выводим их так:
return(
<>
{groups.map((group, i) => {
return (
<div key = {i}>
{group.map((letter, j) => {
return <div key = {j}>{letter}</div>
})}
</div>
)
})}
</>
)
передайте оба массива на html-страницу и используйте цикл 2
for
.