Блог

Главная - Вопросы по программированию - Условно использовать импорт react

Условно использовать импорт react

#reactjs

#reactjs

Вопрос:

У меня есть эти три импорта, и я хочу использовать их соответствующим образом.

 import avatar1 from "../../../../assets/images/user/avatar-1.jpg";
import avatar2 from "../../../../assets/images/user/avatar-2.jpg";
import avatar3 from "../../../../assets/images/user/avatar-3.jpg";

И у меня есть эта функция map, и я хочу показать эти три изображения при выполнении функции map.

Итак, я написал это:

 {this.state.empData.map((emp, index) => (
                          <tr className="unread" key={emp.id}>
                            <td>
                              {index   1 <= 3 ? (
                                <img
                                  className="rounded-circle"
                                  style={{ width: "40px" }}
                                  src={`avatar`   { index }}
                                  alt="activity-user"
                                />
                              ) : (
                                (index = 0) // i want to reset the index, so it would start from 0 again
                              )}
                            </td>                                                        
                          </tr>
                        ))}

Итак, я хочу, чтобы, если у меня есть 10 итераций через эту map функцию, и у меня есть 3 аватара, я хотел показать каждое изображение 10, чтобы каждые 3 аватара повторялись от avatar1 до avatar3 до тех пор, пока выполняется итерация map.

Вышеописанный метод, который я пробовал, не работает, так как изображения не отображаются.

Вы можете мне помочь?

Комментарии:

1. Несколько советов, поскольку это изображения, вы, вероятно, должны получать их через запрос api или статическую папку. импорт подобных ресурсов в основном не нужен. просто используйте URL-адрес в атрибуте src

2. Могу ли я использовать тот же путь, который я упомянул при импорте?

3. И как я могу сбросить index , чтобы он снова запускался с avatar1 после каждых 3 итераций?

Ответ №1:

Напишите функцию выбора и используйте модуль

Вы можете использовать modulus для повторения ряда чисел. он всегда возвращает остаток от деления. например 3 % 3 === 0 6 % 3 === 0 1 % 3 === 1 

 const selectImage = (index) {
  if (index % 3 === 0) {
    return avatar1; // or return "../../../../assets/images/user/avatar-1.jpg"
  }
  if (index % 3 === 1) {
    return avatar2; // or return "../../../../assets/images/user/avatar-2.jpg"
  }
  if (index % 3 === 2) {
    return avatar3; // or return "../../../../assets/images/user/avatar-3.jpg"
  }
}

а затем в вашем компоненте

  <img
   className="rounded-circle"
   style={{ width: "40px" }}
   src={selectImage(index)}
   alt="activity-user"
 />

Комментарии:

1. Неожиданный маркер вблизи угловой скобки