Conversation
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Michale,
Jesteś pewny, że wrzuciłeś wszystko co masz? Brakuje mi paru komponentów ;)
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Michale,
Zmierza to w dobrym kierunku, ale...
Musisz wdrożyć rozwiązania bardziej elastyczne.
W innym wypadku te komponenty nie będą reużywalne.
Za każdym razem musiałbyś tworzyć ich kopie, aby zdefiniować odpowiednie dane.
Postaraj się nanieść poprawki :)
| // import TabsItems from './TabsItems' | ||
|
|
||
| const Tabs = () => { | ||
| const TabsItems = [ |
There was a problem hiding this comment.
Tak to nie może działać. Jeśli chciałbyś mieć w aplikacji 2 taki zakładki (z różną treścią) to jak rozwiążesz ten problem? To muszą być dane pochodzące z zewnątrz czyli przez props.
PS. Możesz do tego wykorzystać props.children: https://react.dev/reference/react/Children
| const [items, setActive] = useState(TabsItems) | ||
|
|
||
| const onClick = idToActivate => { | ||
| console.log(TabsItems) |
There was a problem hiding this comment.
Dlaczego twierdzisz, że klik nie działa? U mnie po kliknięciu pojawia się zawartość w consoli...
| <TabsItem data={TabsItems} onClick={onClick}></TabsItem> | ||
| </StyledNav> | ||
| <StyledDiv> | ||
| <TabsText data={TabsItems}></TabsText> |
There was a problem hiding this comment.
Z tego co widzę to po prostu nie przekazujesz "items"
| </Alert> | ||
| </Col> | ||
| </Row> | ||
| ) |
| <Button>Button!</Button> | ||
| </Col> | ||
| </Row> | ||
| ) |
| border-radius: 0.25rem; | ||
| ` | ||
|
|
||
| export { StyledBreadcrumb } |
| } | ||
| ` | ||
|
|
||
| export { StyledBreadcrumbItem } |
|
|
||
| const Button = props => { | ||
| return ( | ||
| <ThemeProvider theme={themeSettings}> |
There was a problem hiding this comment.
Motyw (theme) powinien być poza samym komponent aby można było go definiować dowolnie w każdy aplikacji. W tym przypadku moglibyśmy po prostu go ostylować bez motywu.
| } | ||
| ` | ||
|
|
||
| export { StyledButton } |
| display: block; | ||
| ` | ||
|
|
||
| export { StyledCol, StyledNav, StyledDiv } |
2 participants
W zadaniu 5 miałem problem. Funkcja onClick wydaje mi się ok, ale nie działa. W pliku TabsItems mam tablice z obiektami, które mają generować tab itemy. Chciałem zrobić to tak aby importować tą tablicę i na niej pracować. Dlatego w plikach mam zakomentowane // import TabsItems from './TabsItems'. Bardzo proszę o podpowiedź jak to zrobić i czy będzie to poprawne :)