Vetaly
Добавить в настройках, чтобы при сохранении автоматически использовал prettier
Nikita
Привет, вы с появлением хуков используете ещё Function as Child Component ?
не, есть же спец тип для таких компонентов. React.FC<MyProps>;
Sergiy
да, я prettier использую. Всё было хорошо, но к какой-то момент он слетел, что-ли... Не помнишь название настройки?
Nikita
Я имею в виду в разработке
тогда я вообще не понимаю о чем ты глаголишь
Vetaly
Например раньше можно было написать TabsSwitcherProvider, которые внутри себя отвечал за переключения табов и передавал потомку selectTabId, onSelectTab
Vetaly
А сейчас можно написать хук для этого
Nikita
Например раньше можно было написать TabsSwitcherProvider, которые внутри себя отвечал за переключения табов и передавал потомку selectTabId, onSelectTab
даже если ты напишешь хук, суть будет такая же, у тебя будет родитель который будет отвечать за детей и детям ты будешь передавать коллбеки
Vetaly
в нынешней ситуации с хуками или впринципе такая манера композиции компонентов уходит в прошлое
Nikita
Да нифига. Напиши мне на хуках реализацию табов. У тебя там все равно останется родитель который держит в себе стейт и потомки которые просто что-то рендерят.
Nikita
Как ты себе представляешь переключение табов из детей?
Nikita
хуки позволяют просто по новому композировать код, но композиция компонентов особо не меняется.
Vetaly
никто не говорит про одних детей. вот так: const TabComponent = ({tabs}) => { const [selectTabId, onSelectTab] = useState(defaultSelectTabId); return (<View>{tabs.map( tab => <Tab tab={tab} onSelectTab selectTabId key />)}</View>) } типо того сейчас, раньше было бы по другому: const TabComponent = ({tabs, defaultTab}) => { return (<TabSwitcherProvider defaultTab={defaultTab}>{(selectTabId, onSelectTab) => <Tab ../>}</TabSwitcherProvider>) }
Igor
Как ты себе представляешь переключение табов из детей?
если забыть что речь о реакте то звучит страшно)
Nikita
ну допустим нужно сделать через провайдер, то да, необходимость в рендер пропсе отпадает, можно напрямую в ребенке заказать себе контекста нужного
Vetaly
я working с this pattern очень good
как ты думаешь он ещё останется или хуки его вытеснили?
Vestrond
Какая есть библиотека иконок с норм набором?
Nikita
например я давно отказался от коннектов из редакса в пользу хуков.
Vestrond
Nikita
например я давно отказался от коннектов из редакса в пользу хуков.
хотя нужно не забывать про оптимизации, а то закинешь литерал объекта с экшенами в useActions() напрямую и видишь как компонент по 30-40 раз рендерится, почти постоянно когда переписываю код или пишу новый, в конце перед рендером вставляю console.count('render'), чтоб видеть косяки сразу
Nikita
ничо страшного - пусть ререндерится. когда начнет тормозить - будешь оптимизировать)
это просто гигиена обычная. Хотя у меня была логика которая завяна на количестве рендеров и если было куча ререндеров, то все к чертовой бабушке ломалось usePrevious(). Потом я одумался и переписал на более простой способ.
Alexander
Code Daily - Using Functions as Children and Render Props in React Components https://codedaily.io/tutorials/6/Using-Functions-as-Children-and-Render-Props-in-React-Components
Nikita
Code Daily - Using Functions as Children and Render Props in React Components https://codedaily.io/tutorials/6/Using-Functions-as-Children-and-Render-Props-in-React-Components
а, бля, теперь понял о чем он все время толковал. Никогда не задумывался, что этот паттерн так называют. Точней, я все это называл рендер пропсами.
Sergiy
всем привет. Работаю в VSCode на реакте. Появилась проблема: при сохранении файла JSX тег, или компонент не форматируеться. То-есть: если есть <div></div>, то он не форматируеться в <div />. Подскажите, как пофиксить это? у меня стоит Prettier
Nikita
поставь eslint который будет колапсить теги
Sergiy
поставь eslint который будет колапсить теги
я вот только что ставил...там нужно настройки менять?или эта штука по дефолту есть?
Sergiy
и как пофиксил?
Nikita
я вот только что ставил...там нужно настройки менять?или эта штука по дефолту есть?
https://www.npmjs.com/package/eslint-config-react-app либо сам опции вбей нужные
Nikita
оно поддерживает autofix
Sergiy
я поставил линт. По дефолту он этого не поддерживает
SENATOR ARMSTRONG
С помощью каких библиотек вы делаете датагриды? Чтоб можно было менять данные прямо в гриде и потом сохранять изменения
Nikita
готовые либы не рассматривал, коллега на react-window реализовывал data-гриды
Bogdan
Есть различного рода елементы, выпадающий по клику, типо меню профиля, настройки, сайт бар и тд, разумно логику открытия, закрытия высунуть в хук, типо ы хук передавать кнопку и сам компонент, который показывать, внутри хука кнопке клик передать, а для компонента реф сделать?
Ivan
Проще стор заюзать
Ivan
Сам до недавних пор пичкал компоненты всякой логикой. Потом один раз повторился в коде, ещё раз и перенёс некоторую логику в mobx
Bogdan
Ты рофлишь? Какой стор для выпадашки, ну фу
Anonymous
Я просто оставлю это здесь https://ru.m.wiktionary.org/wiki/%D1%82%D0%B8%D0%BF%D0%B0
Ivan
Ну сайдбар ведь подразумевает другие параметры? (Имя профиля, аватар, авторизован ли юзер, пункты меню итд) - upd гораздо удобней будет задействовать стор
SENATOR ARMSTRONG
Кто-то использовал https://devexpress.github.io/devextreme-reactive/react/grid/ ? Как вам?
Ivan
SENATOR ARMSTRONG
Ivan
Сорян за фотку, не зашёл с компа в телегу)
SENATOR ARMSTRONG
Ааа, материал юи. У меня бутстрап, использую реакт тейбл, но чтобы сделать эдитабл надо вроде как заморочиться
Ivan
Раньше достаточно долго использовал Raster, да чет ворнинги начали напрягать, которых, кстати, в продакшне нет. Потом нашёл от материала
SENATOR ARMSTRONG
Гуглю, может кроме материал юи есть ещё готовые решения какие-то (бесплатно)
Sharyar
Можете подсказать архитектуру по редукс: нужно запросить у сервера токен отправив login/password, далее делать crud запросы вместе этим токеном
Asan
подскажите плиз State через connect можно прокинуть только в классовый компонент?
Nikolai
Можете подсказать архитектуру по редукс: нужно запросить у сервера токен отправив login/password, далее делать crud запросы вместе этим токеном
Отдельные редьюсеры для пользователя/логина и для сущностей crud делайте и через combineReducers обьединяйте
Asan
В любой
const App = () => { console.log(props.state) return ( <div className="App"> фывыф </div> ); } const mapStateToProps = (state) => state;
Asan
не работает почему то, в чем может быть проблема?
Asan
'props' is not defined no-undef
Asan
export default connect(mapStateToProps,)(App);
Nikolai
не работает почему то, в чем может быть проблема?
Пропс забыли в первым аргументом объявить. const App = (props) =>
Anonymous
Всем здравствуйте, у меня такой вопрос: я генерирую целый кусок html из базы данных. И отображаю его "как есть" с помощью dangerouslySetInnerHTML. Но есть проблема с картинками, у них путь указан по локальной системе (предыдущей). И хотел бы узнать есть ли какой нибудь способ где можно было добавить префикс к src всех картинок? Заранее спасибо.
Sheldhur
сап есть компонент, который должен добавлять в форме новые поля. Я в первом варианте сделал так что компонент поля, которое надо было продублировать, брался из children и клонировался, и всё ок работало. Потом надо было расширить функционал и это стало неудобно, решил передавать элемент для рендера через пропс renderItem и теперь при вводе в поле теряется фокус. Я понимаю что это из-за ререндера, но не совсем понимаю почему в первом варианте это работало (возможно потому что cloneElement сэйвит ref и key, но я их не указывал) и как это пофиксить https://gist.github.com/sheldhur/11b7f56ea716385e20604e107758a9e3
artalar
Может кто поможет с некстом и преактом (там есть ссылка на кодсендбокс): https://github.com/preactjs/preact/issues/1757#issuecomment-536865129
Aza 👁️
Всем привет. Когда я изучал вью я встретил vuetify это типо как бутстрап. В реакте тоже такое имеется?
Sheldhur
нет, в реакте ничего нет
Sheldhur
здесь все приходится делать самому
Sheldhur
ну довольно популярно щас