add menu person#4
Conversation
halavasty
left a comment
halavasty
left a comment
There was a problem hiding this comment.
Дорабатываем все пункты по которым оставленный комментарии
В целом вижу что есть успехи, но ещё много работы 👍
|
|
||
| const click = () => console.log ("Кнопка нажата"); | ||
|
|
||
| export const Btn_notification = () => { |
There was a problem hiding this comment.
подобное именование компонентов вызывает вопросы даже у vs vode
| export const Btn_notification = () => { | ||
| return ( | ||
| <div className="Btn_notification"> | ||
| <button className="notification" onClick = {click}><div className="badge"/></button> |
There was a problem hiding this comment.
не вижу чтобы в badge можно было прокинуть цифру.
компонент не принимает props
скриншот из задачи
| @@ -0,0 +1,21 @@ | |||
| .notification { | |||
There was a problem hiding this comment.
имена классов не соответствуют имени компонента
аналогичные имена классов могут появиться и в других компонентах при таком подходе.
что вызовет переопределение css
|
|
||
|
|
||
|
|
||
| export const Btn_down = () => { |
There was a problem hiding this comment.
@nadya12082012 какая логика у этого копонента? нужен ли он вообще и зачем
There was a problem hiding this comment.
судя по макету это должна быть стрелочка вниз, но я не вижу её когда в проекте.
| setOpen(!open); | ||
| }; | ||
| const iconOupen = function () { | ||
| console.log('../../assets/image 54.svg'); |
There was a problem hiding this comment.
это не метод который выводит адрес картинки по которой нажила. это метод который имитирует метод.
реальный метод должен выглядеть так
const handleIconClick = (person) => {
console.log(person.icon);
} при этом метод должен быть 1 для всех элементов списка
| <div className="New"> | ||
| <div onClick={iconOupen} className="submenu-dropdown"><img src={personOne} className="person" alt="image"/></div> | ||
| <div onClick={iconOupenTwo} className="submenu-dropdown" ><img src={personTwo} className="person" alt="image"/></div> | ||
| <div onClick={iconOupenThree} className="submenu-dropdown" ><img src={persona} className="person" alt="image"/></div> |
There was a problem hiding this comment.
три дива сверху 39,40,41 строки
это обсолено идентичные элементы, где использование компонентного подхода?
если элементы повторяются по разметке и логике, то должны быть реализованы как отдельная единица
{persons.map((person) =>
(<li onClick={() =>
handleIconClick(person)} className="DropdownPerson-Submenu" >
<img src={person.icon} className="DropdownPerson-Image" alt={person.name} />
</li>))}| max-width: 300px; | ||
| margin-left: 980px | ||
| } | ||
| #menu { |
There was a problem hiding this comment.
и вот когда правила не соблюдаются и появляется несколько классов .menu начинают появляться баги.
А вместо решения этих багов начинаю нарушаться новые правила.
Мы не используем ID для вёрстки id атрибут для этого не предназначен
| border-radius: 50%; | ||
| border: none; | ||
| } | ||
| #menu { |
There was a problem hiding this comment.
дублирование также не имеет смыла. стили из это селектора можно переложить в аналогичных выше (дополнив)
| @@ -0,0 +1,26 @@ | |||
| /* import "./Dropmenu.scss"; | |||
There was a problem hiding this comment.
если код закомментированный, то ему нет места в проекте.
Удаляем 😄
| @@ -0,0 +1,8 @@ | |||
| /* .person { | |||
2 participants
No description provided.