Модуль не определен для динамического импорта именованного экспорта из внешнего пакета

Question

Я хочу импортировать значки из react-icons как определено массивом строк, соответствующих именованному экспорту компонентов значка из react-icons. Я покрываю кейсы для каждой библиотеки иконок изreact-icons. Это пример использования FontAwesome.

lazy(() => import('react-icons/fa').then(module => ({ default: module.Components[icon]})))

Приведенный выше фрагмент кода был найден здесь как метод динамического импорта именованного экспорта.

Я ожидаю, что это вернет компонент, соответствующий значку, указанному icon, например let icon = 'FaPhp';Что происходит, это ошибка, которая говорит: TypeError: Cannot read property 'FaPhp' of undefined

Answer 1

React ожидает, что все компоненты будут названы с заглавной буквы. Поэтому я переименовал итераторicon к Icon, то я пропустил module.Components[icon]и заменил его на module[Icon] который решил мою проблему!

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