M
Anton Kalinichenko
<Icons.IconName> , обращение через квадратные скобки не прокатит
а как динамически вызывать иконку через .map
Size: a a a
2020 December 24
DS
даже если JSX это пропустит, выглядит ужасно )
Вас пугает js?
AK
Anton Kalinichenko
Все что пишите, разобрался.
еще раз суть:
Так работает
еще раз суть:
Так работает
С этим разобрался, в динамической строке, должна быть сразу указана root директория модуля, а дальше путь может быть собран из частей на лету.
d
Если без хардкода никак, то импортируй в файл, засунь в массив и играйся ретёрном через map(), forEach(), for of, for
d
А вот сейчас - да, страшненько
AK
Есть список, который рендерится через .map()
Каждый элемент списка имеет название иконки, как отрендерить такую иконку? У меня иконки это отдельный .jsx файл
я думал создать объект, в котором ключ - название иконки, как в списке, и по ключу доставать нужный элемент, но а как его отрендерить?
Ведь нельзя сделать что-то подобное <ICONS[icon]/>
Каждый элемент списка имеет название иконки, как отрендерить такую иконку? У меня иконки это отдельный .jsx файл
я думал создать объект, в котором ключ - название иконки, как в списке, и по ключу доставать нужный элемент, но а как его отрендерить?
Ведь нельзя сделать что-то подобное <ICONS[icon]/>
Вообще, ваш кейс где-то граничит с моим.
Сейчас вот делаю, что бы при рендере можно было задать иконку текстом через props. В таком случае компонент становится цельным, переиспользуемым и динамичным. Создал масив с названиями нужных иконок и отрисовал...
Сейчас вот делаю, что бы при рендере можно было задать иконку текстом через props. В таком случае компонент становится цельным, переиспользуемым и динамичным. Создал масив с названиями нужных иконок и отрисовал...
AK
Такой вопрос, если я сделаю:
await import("react-icons/ai");
Загрузятся все иконки awesome icons
Как сделать динамический импорт отдельного компонента?
await import("react-icons/ai");
Загрузятся все иконки awesome icons
Как сделать динамический импорт отдельного компонента?
VP
Сделайте немного иначе - компонент с полем name и выбирайте из этого объекта и рендерите
пример c использованием ts (enum), можно заменить на обычный объект
пример c использованием ts (enum), можно заменить на обычный объект
enum iconName = {
bin
}
const icons = {
[iconName.bin]: require('icon-bin.png')
}
const Icon = ({ name, ...props }) => {
.... //
const IconComponent = icons[name]
.... // обработка отсутствия такой иконки, как вариант - вернуть null
return (
<IconComponent {...props} />
)
}M
Anton Kalinichenko
Вообще, ваш кейс где-то граничит с моим.
Сейчас вот делаю, что бы при рендере можно было задать иконку текстом через props. В таком случае компонент становится цельным, переиспользуемым и динамичным. Создал масив с названиями нужных иконок и отрисовал...
Сейчас вот делаю, что бы при рендере можно было задать иконку текстом через props. В таком случае компонент становится цельным, переиспользуемым и динамичным. Создал масив с названиями нужных иконок и отрисовал...
Если интересно, то решил сделать так, импортируется каждый .jsx компонент иконки, хотя сейчас перепишу на простой import { ReactComponent as Icon } from './icon.svg'
D
Если интересно, то решил сделать так, импортируется каждый .jsx компонент иконки, хотя сейчас перепишу на простой import { ReactComponent as Icon } from './icon.svg'
Прям фигня решение для иконок
i
Товарищи как поступить в этом случае?
нужно знать когда страница была загружена полностью, но так хук ругается
нужно знать когда страница была загружена полностью, но так хук ругается
React Hook React.useEffect has an unnecessary dependency: 'document.readyState'. Either exclude it or remove the dependency array. Outer scope values like 'document.readyState' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
DS
Товарищи как поступить в этом случае?
нужно знать когда страница была загружена полностью, но так хук ругается
нужно знать когда страница была загружена полностью, но так хук ругается
React Hook React.useEffect has an unnecessary dependency: 'document.readyState'. Either exclude it or remove the dependency array. Outer scope values like 'document.readyState' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
Зачем нужно знать?
TF
Разве useEffect происходит не после рендер фазы?
TF
i
Зачем нужно знать?
Мне нужно знать когда загрузится весь контент страницы -> шрифты, картинки
AK
Кто знает наверняка, если я делаю так:
import { AiArrow } from “react-icons/ai”
Что в таком случае произойдёт, по факту подгрузится все иконки awesome icons, А в переменную AiArrow попадёт конкретная? Ведь так?
import { AiArrow } from “react-icons/ai”
Что в таком случае произойдёт, по факту подгрузится все иконки awesome icons, А в переменную AiArrow попадёт конкретная? Ведь так?
i
Разве useEffect происходит не после рендер фазы?
хук вызывается после контент лоада но не после лоада
E
Anton Kalinichenko
Кто знает наверняка, если я делаю так:
import { AiArrow } from “react-icons/ai”
Что в таком случае произойдёт, по факту подгрузится все иконки awesome icons, А в переменную AiArrow попадёт конкретная? Ведь так?
import { AiArrow } from “react-icons/ai”
Что в таком случае произойдёт, по факту подгрузится все иконки awesome icons, А в переменную AiArrow попадёт конкретная? Ведь так?
Да, но tree shaking выкинет все лишнее из финального бандла.
M
Мне нужно получать актуальную ширину дисплея, для этого я выношу логику в хук. Можно ли напрямую задавать хендлер к window.onresize = resizeHandler, в котором доставать нужную ширину, или нужно добавлять обработчик через .addEventListener ?
VL
Привет, apollo как-то хитро передает пропсы в компонент, нужно убрать и вручную передать ему пропсы как это можно сделать?