короче, мне нужно такое поведение:
у меня в папке images/svg хранятся все свгшки
я должен иметь возможность вставлять их на страницы через use
как добиться этого с минимальными усилиями на реакт проекте?
что такое use?
arthur
Zaff
что такое use?
не полностью разбираюсь, но он позволяет вставлять инлайн свг на страницу из отдельных свг файлов xhr запросами
Vadim
вы с ним работали?
import ReactSVG from "react-svg";
import circle from "../../svg/circle.svg";
<ReactSVG src={circle} />
Zaff
ну, блин, в документации про второй импорт ничего не было
Zaff
я думал можно напрямую в src писать, но так не работает
Mihail
Viktor
короче, мне нужно такое поведение:
у меня в папке images/svg хранятся все свгшки
я должен иметь возможность вставлять их на страницы через use
как добиться этого с минимальными усилиями на реакт проекте?
Насколько я понял из описания react-svg это не лучший способ в вашей ситуации, потому что у вас есть уже эти свгшки во время билда. Есть ещё вариант собрать спрайт из всех свгшек а потом ссылаться на определенную свг из спрайта в вёрстке. Спрайт можно генерировать в билд тайме и кэшировать как захочется. В рантайме никакого JSa не надо.
Делаем так через: https://github.com/kisenka/svg-sprite-loader/blob/master/README.md
Zaff
Насколько я понял из описания react-svg это не лучший способ в вашей ситуации, потому что у вас есть уже эти свгшки во время билда. Есть ещё вариант собрать спрайт из всех свгшек а потом ссылаться на определенную свг из спрайта в вёрстке. Спрайт можно генерировать в билд тайме и кэшировать как захочется. В рантайме никакого JSa не надо.
Делаем так через: https://github.com/kisenka/svg-sprite-loader/blob/master/README.md
Спасибо большое, уже разобрался, react-svg вполне подошёл пока. Оказывается, в первой попытке я неправильно импортировал свг. Чуть выше подсказали как это делать правильно
Viktor
Ок
Oleksii
Donald
при загрузке компонента он лезет в api на бакенде по componentDidMount, потом данные из api используются в handleChange.
Как их разумнее всего туда передавать? В стейте хранить вроде бы смысла нет, они не реактивные.
В переменную уровня компонента сунуть? компонент функциональный
Nikolai
при загрузке компонента он лезет в api на бакенде по componentDidMount, потом данные из api используются в handleChange.
Как их разумнее всего туда передавать? В стейте хранить вроде бы смысла нет, они не реактивные.
В переменную уровня компонента сунуть? компонент функциональный
Как это функциональный компонент с componentDidMount?
Donald
c useEffect, извиняюсь
Donald
напрямую нет, их лопатит handleChange и потом сует в стейт
Kurzdor
напрямую нет, их лопатит handleChange и потом сует в стейт
Если лопатит, то можно просто отправить эти данные как аргумент в хэндлчейндж
Kurzdor
🤷♂
Donald
Если лопатит, то можно просто отправить эти данные как аргумент в хэндлчейндж
чтобы его туда отправить, надо чтобы он где-то сначала был
Kurzdor
Покажите код
Donald
const SweepFormComponent = () => {
let data
React.useEffect(async () => { //componentDidMount
data = await getGasMarks())
}, []);
function handleClick () {
console.log(data.text)
}
return (<a onClick={handleClick}>test</a>)
}
Donald
что-то такое
Donald
так-то оно работает, но функция-то нечистая получается
Nikolai
В стейт засунь да и все
Donald
ну мне он в стейте не нужен, он в реактивности не участвует
Donald
а как?
Donald
на самом деле я так написал
React.useEffect(() => { //componentDidMount
async ()=>setMarks(await getGasMarks())
//console.log('mount it!');
}, []);
Donald
но это из-за тайпскрипта в основном вроде
Nikolai
ну мне он в стейте не нужен, он в реактивности не участвует
При чем тут реактивность? Это стейт компонента - при маунте данных не было, после маунта подгрузились и используются. Обработчик можно блокировать если данные не загрузились и крутилку показать
Nikolai
Из пальца проблемы выдумываете
Nick
Реакт вообще не реактивный так-то🙃 То ли дело Svelte
Roman
Реакт вообще не реактивный так-то🙃 То ли дело Svelte
Он хоть растет? Пару месяцев назад только 1 вакансия была на хэхэ
Kurzdor
Реакт вообще не реактивный так-то🙃 То ли дело Svelte
Так, валите в свой курятник тогда, не надо тут разводить
Nick
Так, валите в свой курятник тогда, не надо тут разводить
Так я не говорю, что Реакт плохой. Я к тому что термин вообще не про него
Kurzdor
Так я не говорю, что Реакт плохой. Я к тому что термин вообще не про него
А вью?
А с реактом что не так?
А?
Nick
А вью?
А с реактом что не так?
А?
Все с ним так. Но setState это не реактивность так то. Он не реагирует на изменения, ты сам вызываешь это
Nick
Вью не ковырял, хз
Kurzdor
Все с ним так. Но setState это не реактивность так то. Он не реагирует на изменения, ты сам вызываешь это
Давайте вспомним когда реакт был создан, в каком году
Kurzdor
Тогда был форс весь этот на реактивность?
И то как оно должно работать?
Юра
Друзья, всем привет! Подскажите пожалуйста, как бороться с асинхронностью this.setState? Делаю вычисления (например, increment на единицу), делаю this.setState(), сразу же вывожу значение - оно прежнее. С таймаутом в секунду уже новое. А на значении работает условный оператор, и, соответственно, условие отрабатывает неправильно.
Nick
Тогда был форс весь этот на реактивность?
И то как оно должно работать?
Шоб я знал. Я года полтора на реакте только. Говорю т.к. есть что с чем сравнить.
Раньше с Ангуляром соревнования были, насколько я знаю вроде
Anonymous
Anonymous
Или SCU
Kurzdor
Друзья, всем привет! Подскажите пожалуйста, как бороться с асинхронностью this.setState? Делаю вычисления (например, increment на единицу), делаю this.setState(), сразу же вывожу значение - оно прежнее. С таймаутом в секунду уже новое. А на значении работает условный оператор, и, соответственно, условие отрабатывает неправильно.
надо в коллбэке setState вызывать нужные операции с тем значением
Kurzdor
aka this.setState({
foo: true,
}, () => console.log(this.state.foo))
Юра
Оххх спасибо. Я до коллбеков в setState еще не дошел, спасибо за подсказку))
Егор
aka this.setState({
foo: true,
}, () => console.log(this.state.foo))
У меня юз-стейтах похожая ситуация случилась на одном проекте. Значение менялось только при вызове со второго раза. Предполагаю что проблема в архитектуре. Сталкивались с таким?
Kurzdor
У меня юз-стейтах похожая ситуация случилась на одном проекте. Значение менялось только при вызове со второго раза. Предполагаю что проблема в архитектуре. Сталкивались с таким?
а вот когда юзать хук-юзстейт то больше проблем
есть такое решение
https://www.robinwieruch.de/react-usestate-callback/
Kurzdor
https://github.com/reactjs/rfcs/issues/98
Kurzdor
https://stackoverflow.com/questions/54867616/console-log-the-state-after-using-usestate-doesnt-return-the-current-value
Nikolai
а вот когда юзать хук-юзстейт то больше проблем
есть такое решение
https://www.robinwieruch.de/react-usestate-callback/
а useEffect самому нельзя написать на изменения стейта? Такие "решения" на кого рассчитаны?
Alexander
а useEffect самому нельзя написать на изменения стейта? Такие "решения" на кого рассчитаны?
Очень не оправдывает себя такое решение. А если у меня 2 useState и на изменение каждого выполняется одно и то же действие? Например подгрузить данные, если изменилась пагинация или применилась сортировка
Nikolai
Очень не оправдывает себя такое решение. А если у меня 2 useState и на изменение каждого выполняется одно и то же действие? Например подгрузить данные, если изменилась пагинация или применилась сортировка
Не понял вопроса. Я говорил о том, что затягивание подобных кастомных хуков в проект - это лишние зависимости и нежелание разбираться с тем как это сделать самому, что в итоге решением совсем не является. Там хук на 20 строчек, но чувак прям заморочился написать статью и выложить это поделие в npm
Alexander
Не понял вопроса. Я говорил о том, что затягивание подобных кастомных хуков в проект - это лишние зависимости и нежелание разбираться с тем как это сделать самому, что в итоге решением совсем не является. Там хук на 20 строчек, но чувак прям заморочился написать статью и выложить это поделие в npm
А, я прошляпил, что это в npm выложено. Смысла ноль. Такое можно самому за 5-10 минут написать, ещё и своих плюшек наделать. Как раз что-то типо combineStates(paginatorState, sortState, (page, sort) => do anything)
Юра
Слушайте, а у React свое мнение на display: none;, как я погляжу? Ставлю элементу сей атрибут, его не видно, но он все равно в ДОМе
Roman
Слушайте, а у React свое мнение на display: none;, как я погляжу? Ставлю элементу сей атрибут, его не видно, но он все равно в ДОМе
Так и должно быть. В чем проблема?
Dmytro
Юра
display: none убирает элемент из дома
Тимофей 🛴
Dmytro
Нет
Александр
Dmitriy
Юра
Ааа, все, понял. Я че-то подумал, что display: none работает как вьюшный v-if 😄 Лол
Yura
Юра
Китикет
Добрый день!
Mr. Sam
Привет, дорогие друзья! А так есть книги по ReactJS?
Mr. Sam
Пожалуйста