Korsikova PR#1
Conversation
| <Header title='Добавить участника' /> | ||
| <ParticipantCard title='Имя и фамилия'/> | ||
| <ParticipantCard title='Количество очков'/> | ||
| <button className='button'>Добавить</button> |
There was a problem hiding this comment.
Сейчас обычно используется подход, когда почти все элементы вёрстки - это компоненты. То есть как здесь в случае с button с классом button - делается такой компонент Button, импортируется и используется. Это делается для большей гибкости вёрстки/приложения. Если в какой-то момент понадобится поменять класс button на какой-нибудь другой, то это будет достаточно сделать в одном месте
| <Header title='Лидеры'/> | ||
|
|
||
| <div className='leadersContainer'> | ||
| <LeaderCard name='Пётр Иванов' score='8901 очков' img={cup}/> |
There was a problem hiding this comment.
В реальности будет очень неудобно работать с форматом данных "nnnn очков". Если потребуются какие-то вычесления на бэке или фронте, то придётся извлекать число и тд. То есть в реальной ситуации почти с 100% вероятностью данные прилетят просто в виде числа - 8901.
Тебе здесь нужно заменить строки на числа (score={8901}) и дальше сделать в компоненте, чтоб выводилось слово "очков"
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .Leader-name { |
There was a problem hiding this comment.
то кемелкейс, то через дефис. Тут какая-то логика есть?)
| <p className='Leader-score'>{ props.score }</p> | ||
| </div> | ||
| <div className='LeaderCard__image'> | ||
| <img src={props.img} alt='cup'/> |
There was a problem hiding this comment.
Дальше мы изучим propTypes, но пока просто следует предусмотреть отсутствие props.img
Сделай так, чтобы LeaderCard__image выводился только если есть props.img
|
| persons: [ | ||
| {name:'Пётр Иванов', score: 8901, img: cup, imgColor:'gold' }, | ||
| {name:'Максим Кальченко', score: 7890, img: cup, imgColor:'grey' }, | ||
| {name:'Алёна Михалкова', score: 7801, img: cup, imgColor:'brown' }, |
There was a problem hiding this comment.
не мешай логику и представление.
img и imgColor здесь - это представление, а тебе нужно прокидывать логику, т.е. например place: 1
А дальше прокидывать этот place в Card и там уже рендерить соответствующую картинку
| <Header title='Лидеры' color='purple' /> | ||
|
|
||
| <div className='Leaders__container'> | ||
| {this.state.persons.map(person => { |
There was a problem hiding this comment.
используй деструктуризацию
пример:
map(({ name, score, img, imgColor }) => <LeaderCard name={name} />)
| class SidebarNavigation extends Component { | ||
|
|
||
| iconsColorChangeHandler = (e) => { | ||
| let svgs = document.querySelectorAll('.navigation-list__item .button svg'); |
There was a problem hiding this comment.
тут всё мимо Реакта сделано - так быть не должно )
| <div className='Leader-card__image'> | ||
|
|
||
| <div className='Leader-card__trophy-bc'> | ||
| <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> |
There was a problem hiding this comment.
вынеси эту svg в отдельный файл, а потом используй
придётся подумать, как прокидывать туда цвет, но если что, могу рассказать
3 participants
No description provided.