Size: a a a

React — русскоговорящее сообщество

2020 October 17

M

Mark in React — русскоговорящее сообщество
Как правильно работать с search параметрами в url строке?

У меня два компонента, которые взаимодействуют с search параметрами. Компонент сортировки (по дате, по имени, по рейтингу), и компонент фильтрации (по жанрам: комедии, триллеры...).

Элемент по которому происходит клик, должен быть кнопкой или ссылкой?

Если ссылкой, то параметр search можно передать сразу в адресе компонента <Link to={{search: ''}} />

Если кнопкой, то нужно создавать обработчик клика, и программно добавлять search параметр в адресную строку.

Использование <Link to={} /> удобнее, но тк я использую обновление search параметров из двух мест (сортировка и фильтрация), то они будут перетирать друг друга.

Как реализовывается пободный алгоритм?
источник

IB

Ivan Bobchenkov in React — русскоговорящее сообщество
Люди, может кто подсказать, как делать анимацию на CSS в React? Я просто совсем понять не могу, и прочитать хз где. Ибо у меня есть:
<List>{someShit.map(item => <Item></Item>)}</List>

И
как вы понимаете, Item Unmount'тятся, и я не понимаю как сделать анимацию на CSS, даже на CSS классах, ибо не работает, или я долбоёб, если кто подскажет - буду рад, ну или ссылками закидайте, пойду читать, спасибо :)
источник

A

Andrian in React — русскоговорящее сообщество
Mark
Как правильно работать с search параметрами в url строке?

У меня два компонента, которые взаимодействуют с search параметрами. Компонент сортировки (по дате, по имени, по рейтингу), и компонент фильтрации (по жанрам: комедии, триллеры...).

Элемент по которому происходит клик, должен быть кнопкой или ссылкой?

Если ссылкой, то параметр search можно передать сразу в адресе компонента <Link to={{search: ''}} />

Если кнопкой, то нужно создавать обработчик клика, и программно добавлять search параметр в адресную строку.

Использование <Link to={} /> удобнее, но тк я использую обновление search параметров из двух мест (сортировка и фильтрация), то они будут перетирать друг друга.

Как реализовывается пободный алгоритм?
Програмно добавлять
источник

R

Raman in React — русскоговорящее сообщество
Кто юзал victory chart а именно candlestick, как можно покрасить не только candleColors а еще линии. Выходит например негативный красный и обовдка черная. А хочу сделать обводу того же цвета. https://formidable.com/open-source/victory/docs/victory-candlestick/
источник

Q

Qop in React — русскоговорящее сообщество
Переслано от Qop
Кто знает, как решается проблема если выношу элементы в другой компонент, то стили от antd ломаются
источник

Q

Qop in React — русскоговорящее сообщество
стили становятся undefined на них
источник

R

Raman in React — русскоговорящее сообщество
Raman
Кто юзал victory chart а именно candlestick, как можно покрасить не только candleColors а еще линии. Выходит например негативный красный и обовдка черная. А хочу сделать обводу того же цвета. https://formidable.com/open-source/victory/docs/victory-candlestick/
решил, спасибо)
источник

И

Иван in React — русскоговорящее сообщество
Mark
Как правильно работать с search параметрами в url строке?

У меня два компонента, которые взаимодействуют с search параметрами. Компонент сортировки (по дате, по имени, по рейтингу), и компонент фильтрации (по жанрам: комедии, триллеры...).

Элемент по которому происходит клик, должен быть кнопкой или ссылкой?

Если ссылкой, то параметр search можно передать сразу в адресе компонента <Link to={{search: ''}} />

Если кнопкой, то нужно создавать обработчик клика, и программно добавлять search параметр в адресную строку.

Использование <Link to={} /> удобнее, но тк я использую обновление search параметров из двух мест (сортировка и фильтрация), то они будут перетирать друг друга.

Как реализовывается пободный алгоритм?
Выдели единое место, где ты работаешь с урлом. В это место отправляй сигналы из двух мест, а оно, это место агрегирует данные и может нормально построить урл
источник

VR

Victor Rusakovich in React — русскоговорящее сообщество
Ivan Bobchenkov
Люди, может кто подсказать, как делать анимацию на CSS в React? Я просто совсем понять не могу, и прочитать хз где. Ибо у меня есть:
<List>{someShit.map(item => <Item></Item>)}</List>

И
как вы понимаете, Item Unmount'тятся, и я не понимаю как сделать анимацию на CSS, даже на CSS классах, ибо не работает, или я долбоёб, если кто подскажет - буду рад, ну или ссылками закидайте, пойду читать, спасибо :)
источник

IB

Ivan Bobchenkov in React — русскоговорящее сообщество
Подсобите, вот так можно делать, или лучше не нужно? Я про keys
источник

VR

Victor Rusakovich in React — русскоговорящее сообщество
Ivan Bobchenkov
Подсобите, вот так можно делать, или лучше не нужно? Я про keys
Лучше не надо
источник

IB

Ivan Bobchenkov in React — русскоговорящее сообщество
Victor Rusakovich
Лучше не надо
А как тогда?
источник

VK

Vladimir Klimov in React — русскоговорящее сообщество
Ivan Bobchenkov
А как тогда?
Если нет уникальных ключей у данных - создавайте их один раз при получении (в апи слое)
Зачем это делать внутри компонента?
источник

VR

Victor Rusakovich in React — русскоговорящее сообщество
Ivan Bobchenkov
А как тогда?
Прям по месту nanoid используй
Но это бессмысленно
источник

VK

Vladimir Klimov in React — русскоговорящее сообщество
Victor Rusakovich
Прям по месту nanoid используй
Но это бессмысленно
Топ совет
источник

IB

Ivan Bobchenkov in React — русскоговорящее сообщество
Vladimir Klimov
Если нет уникальных ключей у данных - создавайте их один раз при получении (в апи слое)
Зачем это делать внутри компонента?
Т. е. Получил данные, и прямо там сделал новое свойство key = nanoid(), да?
источник

VK

Vladimir Klimov in React — русскоговорящее сообщество
Ivan Bobchenkov
Т. е. Получил данные, и прямо там сделал новое свойство key = nanoid(), да?
Да
источник

VR

Victor Rusakovich in React — русскоговорящее сообщество
Ivan Bobchenkov
Т. е. Получил данные, и прямо там сделал новое свойство key = nanoid(), да?
В элементах списка Id уже должен быть
источник

IB

Ivan Bobchenkov in React — русскоговорящее сообщество
Victor Rusakovich
В элементах списка Id уже должен быть
Ну, в данных с сервера не прилетает id
источник

VR

Victor Rusakovich in React — русскоговорящее сообщество
Ivan Bobchenkov
Ну, в данных с сервера не прилетает id
Добавляй его в момент получения респонза
источник