Как передать компонент в качестве пропса в React
год назад·4 мин. на чтение
Существует множество способов передать компонент в качестве пропса
Существует множество способов передать компонент в качестве пропса, например, специальный проп
Все верно, но что произойдет, если мы будем иметь дело с компонентом
children
, и паттерн render prop. О них вы можете узнать в видео “Паттерн Render Props в ReactJS”.
В случае с render props мы передаем функцию, которая возвращает компонент. В этой статье рассмотрим как передать просто компонент в качестве пропса.
В этой статье мы увидим простую технику, которая позволяет писать удобные настраиваемые компоненты с помощью простых API, просто используя основные строительные блоки React - компоненты.
Опытный React разработчик использует эту технику естественным образом, но новичку сложно понять этот механизм.
Переизбыток пропсов
Иногда в компонент приходится передавать огромное количество пропсов для того чтобы настроить более мелкие вложенные компоненты, из которых состоит ваш компонент. Возникает переизбыток пропсов. Давайте посмотрим на это на примере. Предположим, есть компонентAlert
с Button
внутри.
Что вы можете сделать, чтобы настроить внутреннийconst Button = ({ onClick, children }) => <button onClick={onClick}>{children}</button>; const Alert = ({ children, onAccept }) => ( <div className="alert"> <div className="alert-header"> <h1>Alert!</h1> </div> <div className="alert-content">{children}</div> <div className="alert-footer"> <Button onClick={onAccept}>Ok</Button> </div> </div> ); <Alert onAccept={() => {}}>Attention!</Alert>
Button
? Если вы новичок в React вы, вероятно, думаете, что правильный способ - это передать проп.
const Alert = ({ children, acceptMessage = "Ok", onAccept }) => ( <div className="alert"> <div className="alert-header"> <h1>Alert!</h1> </div> <div className="alert-content">{children}</div> <div className="alert-footer"> <Button onClick={onAccept}>{acceptMessage}</Button> </div> </div> ); <Alert acceptMessage="Understood!" onAccept={() => {}}> Attention! </Alert>
Confirm
с двумя кнопками? Вам нужно дублировать пропсы и иметь некоторые префиксы, чтобы избежать конфликтов имен пропсов.
Как вы можете себе представить, это будет только ухудшаться по мере роста вашего компонента. Это то, что я имел в виду под переизбытком пропсов.const Confirm = ({ children, acceptMessage = "Ok", rejectMessage = "Cancel", onAccept, onReject }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> <Button onClick={onAccept}>{acceptMessage}</Button> <Button onClick={onReject}>{rejectMessage}</Button> </div> </div> ); <Confirm acceptMessage="Yep" rejectMessage="Nope" onAccept={() => {}} onReject={() => {}}> You sure? </Confirm>
Улучшение. Вложенные пропсы
Один из способов немного привести код в порядок — вложить пропсы: по одному пропсу для каждого внутреннего компонента с необходимыми ключами.Это исправляет конфликты, но все становится сложнее. Что произойдет, если я захочу переопределить только один вложенный проп? Чтобы сделать это, нам нужно вручную объединить пропсы со значениями по умолчанию. И что произойдет, еслиconst Confirm = ({ children, onAccept, onReject, acceptButton = { message: "Ok", className: "accept-btn", }, rejectButton = { message: "Cancel", className: "cancel-btn", }, }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> <Button className={acceptButton.className} onClick={onAccept}> {acceptButton.message} </Button> <Button className={rejectButton.className} onClick={onReject}> {rejectButton.message} </Button> </div> </div> ); <Confirm acceptButton={{ message: "Yep", className: "accept-btn" }} rejectButton={{ message: "Nope", className: "reject-btn" }} onAccept={() => {}} onReject={() => {}} > You sure? </Confirm>
Button
также содержит Icon
? Следует ли использовать пару новых пропсов (acceptButtonIcon
, rejectButtonIcon
)? Должны ли вы вкладывать их в существующие пропсы (acceptButton.icon
)? Типы или prop types будет очень сложно читать.
Другой подход. Render props
Render props это один из способов сделать ваши компоненты действительно настраиваемыми, вместо того, чтобы добавлять массу пропсов. Давайте попробуем. Напишем три разные версии компонентаConfirm
, который принимает рендер пропсы.
Версия 1. По одному рендер пропсу для каждой кнопки
В первой версии в компонентеConfirm
добавим по одному рендер пропсу для каждой кнопки:
const Confirm = ({ children, onAccept, onReject, renderAcceptButton = onAccept => ( <Button className="accept-btn" onClick={onAccept}> OK </Button> ), renderRejectButton = onReject => ( <Button className="reject-btn" onClick={onReject}> Cancel </Button> ), }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> {renderAcceptButton(onAccept)} {renderRejectButton(onReject)} </div> </div> ); <Confirm renderAcceptButton={onAccept => ( <Button className="accept-btn" onClick={onAccept}> Yep </Button> )} renderRejectButton={onReject => ( <Button className="cancel-btn" onClick={onReject}> Nope </Button> )} > You sure? </Confirm>
Версия 2. Один рендер проп для всех кнопок
Вторая версия - это один рендер проп для всех кнопок.const Confirm = ({ children, onAccept, onReject, renderButtons = (onAccept, onReject) => ( <> <Button className="accept-btn" onClick={onAccept}> OK </Button> <Button className="reject-btn" onClick={onReject}> Cancel </Button> </> ), }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer">{renderButtons(onAccept, onReject)}</div> </div> ); <Confirm renderButtons={(onAccept, onReject) => ( <> <Button className="accept-btn" onClick={onAccept}> Yep </Button> <Button className="cancel-btn" onClick={onReject}> Nope </Button> </> )} > You sure? </Confirm>
Версия 3. Один рендер проп для всех подкомпонентов
И, наконец, рендер проп для всего компонента:Последний вариант своего рода крайность. Рендер пропсы настолько мощный, насколько это возможно, но он также имеет свои нюансы. Они позволяют изменить способ рендеринга компонента, но повторно использовать «значения по умолчанию» непросто. Это зависит от того, что визуализирует ваш рендер проп. В предыдущих примерах мы видели три варианта, каждый из которых обеспечивает большую гибкость, но меньшую возможность повторного использования «значений по умолчанию». Однако этот подход может показаться излишним, когда мы просто хотим настроить текст кнопокconst Confirm = ({ children, onAccept, onReject, render = (onAccept, onReject, children) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> <Button className="accept-btn" onClick={onAccept}> OK </Button> <Button className="reject-btn" onClick={onReject}> Cancel </Button> </div> </div> ), }) => render(onAccept, onReject, children); <Confirm render={() => { // компонент, который появится внутри `Confirm` }} > You sure? </Confirm>
Alert
/Confirm
.
Просто передать компонент
Этот API гораздо более естественен. Это один из тех случаев, когдаconst Confirm = ({ children, onAccept, onReject, acceptButton = <Button>Ok</Button>, rejectButton = <Button>Cancel</Button>, }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> {React.cloneElement(acceptButton, { className: "accept-btn", onClick: onAccept })} {React.cloneElement(rejectButton, { className: "reject-btn", onClick: onReject })} </div> </div> ); <Confirm acceptButton={<Button>Yep</Button>} rejectButton={<Button>Nope</Button>} onAccept={() => {}} onReject={() => {}} > You sure? </Confirm>
cloneElement
является правильным инструментом.
Если вам интересно, почему мы всегда передаем обработчики, когда в некоторых случаях имеет смысл просто использовать их напрямую, вы правы. В данном случае это не обязательно.
<Confirm acceptButton={<Button onAccept={() => {}}>Yep</Button>} rejectButton={<Button onReject={() => {}}>Nope</Button>} > You sure? </Confirm>
Настройка редактора IDE для работы с React
год назад·2 мин. на чтение
Правильно настроенный редактор может сделать код более понятным для чтения и более быстрым для написания. Это может даже помочь вам отловить ошибки, когда вы пишете код. Если вы впервые настраиваете редактор или хотите настроить текущий редактор, есть несколько рекомендаций.
Содержание туториала по React
Правильно настроенный редактор может сделать код более понятным для чтения и более быстрым для написания. Это может даже помочь вам отловить ошибки, когда вы пишете код. Если вы впервые настраиваете редактор или хотите настроить текущий редактор, есть несколько рекомендаций.
Выбор редактора кода
VS Code — один из самых популярных редакторов, используемых сегодня. Он имеет большой маркет с расширениями и хорошо интегрируется с популярными сервисами, такими как GitHub. Большинство функций, перечисленных ниже, также можно добавить в VS Code в качестве расширений, что делает его легко настраиваемым! Другие популярные текстовые редакторы, используемые в сообществе React:- WebStorm — это интегрированная среда разработки (IDE), разработанная специально для JavaScript.
- Sublime Text имеет поддержку JSX и TypeScript, встроенную подсветку синтаксиса и автозаполнение.
- Vim — это текстовый редактор с широкими возможностями настройки, созданный для эффективного создания и изменения любого типа текста. Он включен как «vi» в большинство UNIX систем и в Apple OS X.
Рекомендуемые функции редактора кода
Некоторые редакторы поставляются со встроенными функциями, но для других может потребоваться добавление расширения.Линтинг
Линтеры находят проблемы в коде по мере его написания, помогая вам исправить их на ранней стадии. ESLint — популярный линтер с открытым исходным кодом для JavaScript.- Установите ESLint с рекомендуемой конфигурацией для React (убедитесь, что у вас установлен Node.js)
- Интегрируйте ESLint в VS Code с официальным расширением
eslint-plugin-react-hooks
для своего проекта. Они необходимы и выявляют самые серьезные ошибки на ранней стадии. Рекомендуемый пресет (preset) eslint-config-react-app
уже включает их.
Форматирование кода
Prettier очистит ваш код, переформатировав его, чтобы он соответствовал предустановленным настраиваемым правилам. Запустите Prettier, и все ваши табы будут преобразованы в пробелы, а ваши отступы, кавычки и т. д. также будут изменены в соответствии с конфигурацией. В идеальной настройке Prettier будет запускаться, когда вы сохраняете файл, быстро внося эти изменения за вас. Вы можете установить расширение Prettier в VS Code, выполнив следующие действия:- Запустить VS Code
- Используйте быстрое открытие (нажмите
Ctrl/Cmd+P
) - Вставьте в
ext install esbenp.prettier-vscode
- Нажмите Enter
Форматирование при сохранении
В идеале вы должны форматировать свой код при каждом сохранении. В VS Code есть настройки для этого.- В VS Code нажмите
Ctrl/Cmd + Shift + P
. - Напишите
"settings"
- Нажмите Enter
- В строке поиска введите
"format on save"
. - Убедитесь, что опция
"format on save"
отмечена галочкой.
eslint-config-prettier
, чтобы ESLint использовался только для отлова логических ошибок. Если вы хотите принудительно отформатировать файлы перед слиянием пулл ревеста, используйте prettier --check
для непрерывной интеграции (Continuous Integration, CI).