Вернуть элемент реакции, содержащий значение из массива в соответствии с другим массивом целых чисел

У меня есть два массива, которые содержат целое число и такие строки.

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>

и так далее

передайте оба массива на html-страницу и используйте цикл 2 for.

Alvi15 02.02.2023 03:27

Вы спрашиваете, как использовать циклы? Вы спрашиваете, как создавать элементы с помощью Javascript? Вы спрашиваете, как найти индекс массива? Что вы пробовали и с чем у вас возникли проблемы? Что вы имеете в виду "вернуть div"?

Andy Ray 02.02.2023 03:30

Я пытаюсь вернуть компонент реакции с div внутри него и спрашиваю, как связать два массива вместе, чтобы он мог получить значение так же, как я поставил ожидаемый результат в вопросе. извините за путаницу

Dreynaldis 02.02.2023 03:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
73
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если я правильно понимаю, 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>
      )
    })}
  </>
)

Другие вопросы по теме

Высота: 0; переполнение: скрыто; не работает с прокладкой
Функция JavaScript, запускаемая кликабельным тегом <div> для изменения источника изображения тега <img>, не реализуется
Регулярное выражение парсера ссылок Python работает только при поиске 1 типа расширения, но не работает при сопоставлении более одного типа расширения
Как я могу сделать абзац после плавающего элемента, чтобы он не плавал?
Код Javascript неправильно суммирует число с использованием Google Apps с HTML
HTML/CSS: как центрировать элемент по горизонтали?
Если внимательно присмотреться, между коробками будних дней есть небольшие линии или промежутки. Эти линии или пробелы присутствуют в Chrome, но не в Firefox
Как получить значение переменной из функции javascript в функцию python в django
Добавить стиль в класс по нажатию кнопки
Простой инструмент командной строки для преобразования html в pdf для автоматического создания файлов