V
как в styled-components добавить id к элементу?
Size: a a a
2020 July 13
VO
Ты намеренно разделил на две части цельный кусок логики, и ввёл пять пропов чтобы что? Чтобы заменить при необходимости источник данных/обработчиков? Компонент, который принимает вот это всё — вообще нихера не переиспользуемый. Хочешь вынести логику для переиспользования? Напиши хук useTodos, меняй внутри реализацию хоть по пять раз за коммит. Разделением логики работы компонента на два «независимых» компонента добьёшься ровным счетом ничего
Да, действительно. Спасибо, я понял, как можно сделать иначе...
На хуках и правда выглядит понятнее.
На хуках и правда выглядит понятнее.
V
const El = styled.div`…`;
<El id=«3434» />
K
как в styled-components добавить id к элементу?
export const Button = styled.button.attrs({
id: 'айди',
})`
id: 'айди',
})`
V
export const Button = styled.button.attrs({
id: 'айди',
})`
id: 'айди',
})`
а если нужно через описание элемента?
<El id={} />ТФ
И зачем это нужно, если можно сделать то же самое кастомным хуком прямо а нужном компоненте? Чтобы описывать «тупые» компоненты, которые принимают три структуры и пять коллбэков? Они точно тупые в таком случае? Они же бессмысленны. А если у тебя нет TS с сигнатурами — так вообще пиздец, поди разбери, что за 5 пропсов принимает «тупой» компонент, как эти пропсы между собой связаны и как друг на друга влияют
кастомным хуком - который делает что?
V
export const Button = styled.button.attrs({
id: 'айди',
})`
id: 'айди',
})`
или как это через пропсы написать?
K
const El = styled.div`…`;
<El id=«3434» />
вообще кстати так тоже работает
V
вообще кстати так тоже работает
вот нет, поэтому и спрашиваю)
И
https://codesandbox.io/s/presentational-and-container-components-q1vid
Попробую с примером.
У нас есть презентационный компонент
Компонент
Можно реализовать два контейнера с говорящими названиями
Мы можем безболезненно для компонента
Попробую с примером.
У нас есть презентационный компонент
App , отвечающий за UI и обработку событий на нём («лямбда-адаптер» в `onChange`).Компонент
App не знает об обработке данных, эту ответственность на себя берёт его родитель.Можно реализовать два контейнера с говорящими названиями
AppWithHooks и AppWithClass, который обрабатывают данные, получаемые от дочернего App.Мы можем безболезненно для компонента
App менять реализацию обработки данных: классы, хуки, редакс, локалсторедж - нас не волнует.
const App = ({ title }) => {
const [query, onQueryChange] = useInputValue()
const { todos, addTodo } = useTodos()
const onClick = () => addTodo(query)
// ...
}И
Татьяна Фомина
кастомным хуком - который делает что?
👆🏿
И
Да, действительно. Спасибо, я понял, как можно сделать иначе...
На хуках и правда выглядит понятнее.
На хуках и правда выглядит понятнее.
Одним адептом контейнеров меньше, мне не показалось?) День прожит не зря!)
K
вот нет, поэтому и спрашиваю)
это странно, я много где в styled напрямую атрибуты передаю
V
это странно, я много где в styled напрямую атрибуты передаю
жесть
ТФ
👆🏿
а как же вся эта хурма про то, что данными, запросами данных и т.д. должен заниматься стейтменеджер?..
V
жесть, вот как элемент выглядит
VO
Одним адептом контейнеров меньше, мне не показалось?) День прожит не зря!)
Однозначно...
V
но
<GridItem id=‘myId’ /> ничегоVO
Одним адептом контейнеров меньше, мне не показалось?) День прожит не зря!)
Получилось даже что-то типа такого... но в моей реализации я нигде в другом месте query не использую, поэтому засунул в хук...
https://codesandbox.io/s/hooksusetodo-ceiqj
https://codesandbox.io/s/hooksusetodo-ceiqj
И
Татьяна Фомина
а как же вся эта хурма про то, что данными, запросами данных и т.д. должен заниматься стейтменеджер?..
А кто сказал, что внутри useTodos не вызывается useSelector+useDispatch из redux? Или useAtom+useAction из reatom? Или useStore из effector?)