ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Как передать пропсы React компоненту
10 месяцев назад·5 мин. на чтение
Компоненты React используют пропсы (props) для связи друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, предоставляя им пропсы. Пропсы могут напоминать атрибуты HTML, но вы можете передавать через них любое значение JavaScript, включая объекты, массивы и функции.
Содержание туториала по React
Компоненты React используют пропсы (props) для связи друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, предоставляя им пропсы. Пропсы могут напоминать атрибуты HTML, но вы можете передавать через них любое значение JavaScript, включая объекты, массивы и функции.
Пропсы позволяют вам думать о родительских и дочерних компонентах независимо друг от друга. Например, вы можете изменить пропсы
Известные пропсы
Пропсы — это информация, которую вы передаете тегу JSX. Например,className
, src
, alt
, width
и height
— вот некоторые пропсы, которые вы можете передать <img>
:
Пропсы, которые вы можете передать тегуfunction Avatar() { return ( <img className="avatar" src="https://example.com/userpic.jpg" alt="Userpic" width={100} height={100} /> ); } export default function Profile() { return <Avatar />; }
<img>
, предопределены (ReactDOM соответствует стандартам HTML). Но вы можете передать любые пропсы своим собственным компонентам, таким как <Avatar>
, чтобы настроить их.
Передача пропсов в компонент
В этом коде компонентProfile
не передает никаких пропсов своему дочернему компоненту Avatar
:
Вы можете передать вexport default function Profile() { return <Avatar />; }
Avatar
некоторые пропсы в два этапа.
Шаг 1: Передайте пропсы дочернему компоненту
Во-первых, передайте некоторые пропсы вAvatar
. Например, давайте передадим два пропса: person
(объект) и size
(число):
Если двойные фигурные скобки послеexport default function Profile() { return ( <Avatar person={{ name: 'User Name 1', imageId: '12345' }} size={100} /> ); }
person=
вас смущают, помните, что они являются просто объектом внутри фигурных скобок JSX.
Теперь вы можете прочитать эти пропсы внутри компонента Avatar
.
Шаг 2: Прочтите пропсы внутри дочернего компонента
Вы можете прочитать эти пропсы, указав их имена -person
, size
- разделенные запятыми внутри ({
и })
непосредственно после function Avatar
. Это позволяет использовать их внутри кода Avatar
, как если бы вы использовали переменную.
Добавьте немного логики вfunction Avatar({ person, size }) { // person и size можно здесь использовть }
Avatar
, которая использует пропсы person
, size
в отображении, и все готово.
Теперь вы можете настроить Avatar
для отображения разными способами с разными пропсы.
// utils.js export function getImageUrl(person, size = 's') { return 'https://example.com/' + person.imageId + size + '.jpg'; }
// App.js import { getImageUrl } from './utils.js'; function Avatar({ person, size }) { return ( <img className="avatar" src={getImageUrl(person)} alt={person.name} width={size} height={size} /> ); } export default function Profile() { return ( <div> <Avatar size={100} person={{ name: 'User Name 1', imageId: '12345', }} /> <Avatar size={80} person={{ name: 'User Name 2', imageId: '12346', }} /> <Avatar size={50} person={{ name: 'User Name 3', imageId: '12347', }} /> </div> ); }
person
или size
внутри Profile
, не задумываясь о том, как Avatar
их использует. Точно так же вы можете изменить то, как Avatar
использует эти пропсы, не заглядывая в Profile
.
Вы можете думать о пропсах как о «ручках», которые вы можете регулировать. Они выполняют ту же роль, что и аргументы для функций — на самом деле пропсы являются единственным аргументом для вашего компонента. Функции компонента React принимают один аргумент, объект props
:
Обычно вам не нужен весь объект пропса, поэтому можно разбить его на отдельные пропсы. Не пропустите пару фигурных скобокfunction Avatar(props) { let person = props.person; let size = props.size; // ... }
{
и }
внутри (
и )
при объявлении пропсов:
Этот синтаксис называется «деструктурированием» и эквивалентен чтению свойств из параметра функции:function Avatar({ person, size }) { // ... }
function Avatar(props) { let person = props.person; let size = props.size; // ... }
Как указать значения по умолчанию для пропса
Если вы хотите присвоить пропсу значение по умолчанию, чтобы использовать его, когда значение не указано, вы можете сделать это с помощью деструктуризации, поставив=
и значение по умолчанию сразу после параметра:
Теперь, если вfunction Avatar({ person, size = 100 }) { // ... }
<Avatar person={...} />
передан пропс size
, размер будет установлен на 100
.
Значение по умолчанию используется только в том случае, если параметр size
отсутствует или если вы передаете size={undefined}
. Но если вы передадите size={null}
или size={0}
, значение по умолчанию не будет использоваться.
Перенаправление пропсов с синтаксисом распыления JSX
Иногда отправка пропсов повторяется:В повторяющемся коде нет ничего плохого. Но иногда хочется сделать код короче. Некоторые компоненты передают все свои пропсы своим дочерним компонентам, например, какfunction Profile({ person, size, isSepia, thickBorder }) { return ( <div className="card"> <Avatar person={person} size={size} isSepia={isSepia} thickBorder={thickBorder} /> </div> ); }
Profile
делает с Avatar
. Поскольку они не используют никакие свои пропсы напрямую, может иметь смысл использовать более краткий синтаксис распыления (spread):
Это пример перенаправления всех пропсовfunction Profile(props) { return ( <div className="card"> <Avatar {...props} /> </div> ); }
Profile
в Avatar
без перечисления каждого из их имен.
Используйте расширенный синтаксис с ограничениями. Если вы используете его в каждом компоненте - значит что-то не так. Часто это указывает на то, что следует разделить компоненты и передать дочерние компоненты как JSX. Подробнее об этом далее.
Передача JSX в качестве дочернего компонента
Обычно встроенные теги браузера вкладывают друг в друга:Иногда вы захотите вложить свои собственные компоненты таким же образом:<div> <img /> </div>
Когда вы вкладываете контент в тег JSX, родительский компонент получит этот контент в просе, называемом<Card> <Avatar /> </Card>
children
. Например, компонент Card
ниже получит проп children
, который является <Avatar />
, и отобразит его в обертке div
:
// App.js import Avatar from './Avatar.js'; function Card({ children }) { return <div className="card">{children}</div>; } export default function Profile() { return ( <Card> <Avatar size={100} person={{ name: 'User Name', imageId: '12345', }} /> </Card> ); }
// Avatar.jsx import { getImageUrl } from './utils.js'; export default function Avatar({ person, size }) { return ( <img className="avatar" src={getImageUrl(person)} alt={person.name} width={size} height={size} /> ); }
Вы можете думать о компоненте с пропсом// utils.js export function getImageUrl(person, size = 's') { return 'https://example.com/' + person.imageId + size + '.jpg'; }
children
как о специальной лозейке, которую можно «заполнить» родительскими компонентами с произвольным JSX. Вы часто будете использовать проп children
для визуальных оболочек: панелей, сеток и т.д.
Как пропсы меняются со временем
КомпонентClock
ниже получает два пропса от своего родительского компонента: color
и time
. (Код родительского компонента опущен, поскольку он использует состояние, в которое мы пока не будем углубляться.)
Этот пример иллюстрирует, что компонент может получать пропсы с течением времени. Проп не всегда статичен. Здесь пропexport default function Clock({ color, time }) { return <h1 style={{ color: color }}>{time}</h1>; }
time
меняется каждую секунду, а проп color
меняется, когда вы выбираете другой цвет. Пропсы отражают данные компонента в любой момент времени, а не только в начале.
Пропсы иммутабельны — термин из информатики, означающий «неизменяемый». Когда компоненту необходимо изменить свои пропсы (например, в ответ на взаимодействие с пользователем или новые данные), ему придется «попросить» родительский компонент передать ему другие пропсы — новый объект. Затем его старые пропсы будут отброшены, и в конечном итоге движок JavaScript очистит занятую ими память.
Не пытайтесь "изменить пропсы" напрямую. Когда вам нужно отреагировать на пользовательский ввод (например, изменить выбранный цвет), вам нужно будет "установить состояние", о котором вы можете узнать в разделе "Состояние - память компонента".
Резюме
- Чтобы передать пропсы, добавьте их в JSX, как и в случае с атрибутами HTML.
- Чтобы прочитать пропсы, используйте синтаксис деструктурирования
function Avatar({ person, size })
. - Вы можете указать значение по умолчанию, например
size = 100
, которое используется для отсутствующих и неопределенных пропсов. - Вы можете перенаправить все пропсы с помощью синтаксиса распыления JSX
<Avatar {...props} />
, но не злоупотребляйте им. - Вложенный JSX, такой как
<Card><Avatar /></Card>
, будет отображаться как пропchildren
компонентаCard
. - Пропсы - доступны только для чтения. Это такой снимок компонента во времени: каждый рендер получает новую версию пропса.
- Нельзя менять пропсы внутри компонента. Когда вам нужна интерактивность, вам нужно установить состояние.
Реакция на события в React компонентах
10 месяцев назад·8 мин. на чтение
React позволяет добавлять обработчики событий в JSX. Обработчики событий — это ваши собственные функции, которые будут запускаться в ответ на такие действия, как клик, наведение курсора, фокусировка на поле ввода формы и т.д.
Содержание туториала по React
React позволяет добавлять обработчики событий в JSX. Обработчики событий — это ваши собственные функции, которые будут запускаться в ответ на такие действия, как клик, наведение курсора, фокусировка на поле ввода формы и т.д.
Вы определили функцию
Разница тонкая. В первом примере функция
Когда вы пишете код инлайном (определение в той же строке), та же ловушка проявляется по-другому:
Такой инлайн код не срабатывает при клике — он срабатывает каждый раз, когда компонент отрисовывается:
В этом примере
При нажатии на кнопку:
Добавление обработчиков событий
Чтобы добавить обработчик событий, сначала нужно определить функцию, а затем передать ее в качестве пропса соответствующему тегу JSX. Например, вот кнопка, которая пока ничего не делает:Вы можете заставить компонент показывать сообщение, когда пользователь нажимает на кнопку. Для этого нужно выполнить три следующих шага:export default function Button() { return <button>I don't do anything</button>; }
- Объявите функцию с именем
handleClick
внутри компонентаButton
. - Реализуйте логику внутри этой функции (используйте
alert
для отображения сообщения). - Добавьте
onClick={handleClick}
в<button>
.
export default function Button() { function handleClick() { alert('You clicked me!'); } return <button onClick={handleClick}>Click me</button>; }
handleClick
, а затем передали ее как проп в <button>
. handleClick
— это обработчик событий. Обработчик событий:
- Обычно определяется внутри ваших компонентов.
- Имеет имена, которые начинаются с
handle
, за которым следует имя события.
handle
, за которым следует имя события. Вы часто будете видеть onClick={handleClick}
, onMouseEnter={handleMouseEnter}
и т.д.
По-другому вы можете определить встроенный обработчик событий в JSX:
Или, более кратко, используя функцию стрелки:<button onClick={function handleClick() { alert('You clicked me!'); }}>
Все эти стили эквивалентны. Инлайновые обработчики событий удобны для коротких функций.<button onClick={() => { alert('You clicked me!'); }}>
Особенности передачи обработчиков событий
Функции, передаваемые обработчикам событий, должны отправляться, а не вызываться. Например:отправка функции (верно) | вызов функции (неверно) |
---|---|
<button onClick={handleClick}> | <button onClick={handleClick()}> |
handleClick
передается как обработчик события onClick
. Это говорит React запомнить ее и вызывать функцию только тогда, когда пользователь нажимает кнопку.
Во втором примере ()
в конце handleClick()
запускает функцию сразу же во время рендеринга, без каких-либо кликов. Это связано с тем, что JavaScript внутри JSX {
и }
выполняется сразу.
отправка функции (верно) | вызов функции (неверно) |
---|---|
<button onClick={() => alert('...')}> | <button onClick={alert('...')}> |
Если вы хотите определить инлайн (встроенный) обработчик событий, оберните его в анонимную функцию следующим образом:// Это оповещение срабатывает при рендеринге компонента, а не при нажатии! <button onClick={alert('You clicked me!')}>
Вместо выполнения кода внутри при каждом рендеринге создается функция, которая будет вызываться позже. В обоих случаях мы хотим передать функцию:<button onClick={() => alert('You clicked me!')}>
<button onClick={handleClick}>
передает функциюhandleClick
.<button onClick={() => alert('...')}>
передает функцию() => alert('...')
.
Чтение пропсов в обработчиках событий
Поскольку обработчики событий объявляются внутри компонента, они имеют доступ к пропсам компонента. Вот кнопка, при нажатии на которую отображается предупреждение с сообщениемmessage
:
Это позволяет этим двум кнопкам отображать разные сообщения.function AlertButton({ message, children }) { return <button onClick={() => alert(message)}>{children}</button>; } export default function Toolbar() { return ( <div> <AlertButton message="Playing!">Play Movie</AlertButton> <AlertButton message="Uploading!">Upload Image</AlertButton> </div> ); }
Передача обработчиков событий в качестве пропса
Часто требуется, чтобы родительский компонент указывал обработчик событий дочернего элемента. Рассмотрим кнопки: в зависимости от того, где вы используете компонентButton
, вы можете захотеть выполнить другую функцию — возможно, одна воспроизводит фильм, а другая загружает изображение.
Для этого передайте проп, который компонент получает от своего родителя, в качестве обработчика событий, например:
Здесь компонентfunction Button({ onClick, children }) { return <button onClick={onClick}>{children}</button>; } function PlayButton({ movieName }) { function handlePlayClick() { alert(`Playing ${movieName}!`); } return <Button onClick={handlePlayClick}>Play "{movieName}"</Button>; } function UploadButton() { return <Button onClick={() => alert('Uploading!')}>Upload Image</Button>; } export default function Toolbar() { return ( <div> <PlayButton movieName="Kiki's Delivery Service" /> <UploadButton /> </div> ); }
Toolbar
отображает PlayButton
и UploadButton
:
PlayButton
передаетhandlePlayClick
в качестве пропсаonClick
внутренней кнопке.UploadButton
передает() => alert('Uploading!')
в качестве пропсаonClick
дляButton
, который находится внутри.
Button
принимает проп onClick
. Он передает этот проп непосредственно встроенной в браузер кнопке <button>
с onClick={onClick}
. Это говорит React вызывать переданную функцию по клику.
Если вы используете дизайн-систему, такие компоненты, как кнопки, обычно содержат стили, но не определяют поведение. Вместо этого такие компоненты, как PlayButton
и UploadButton
, будут передавать обработчики событий вниз.
Именование пропсов обработчика событий
Встроенные компоненты, такие как<button>
и <div>
, поддерживают только имена событий браузера, такие как onClick
. Однако, когда вы создаете свои собственные компоненты, вы можете называть пропсы их обработчиков событий как угодно.
По соглашению пропсы обработчиков событий должны начинаться с on
, за которым следует заглавная буква.
Например, проп onClick
компонента Button
можно было бы назвать onSmash
:
function Button({ onSmash, children }) { return <button onClick={onSmash}>{children}</button>; } export default function App() { return ( <div> <Button onSmash={() => alert('Playing!')}>Play Movie</Button> <Button onSmash={() => alert('Uploading!')}>Upload Image</Button> </div> ); }
<button onClick={onSmash}>
показывает, что браузерному <button>
(нижний регистр) по-прежнему требуется проп onClick
, но имя пропса, полученное вашим пользовательским компонентом Button
, зависит от вас.
Когда ваш компонент поддерживает несколько взаимодействий, вы можете назвать пропсы обработчика событий по именам конкретных действий. Например, компонент Toolbar
получает обработчики событий onPlayMovie
и onUploadImage
:
Обратите внимание, что компонентуexport default function App() { return ( <Toolbar onPlayMovie={() => alert('Playing!')} onUploadImage={() => alert('Uploading!')} /> ); } function Toolbar({ onPlayMovie, onUploadImage }) { return ( <div> <Button onClick={onPlayMovie}>Play Movie</Button> <Button onClick={onUploadImage}>Upload Image</Button> </div> ); } function Button({ onClick, children }) { return <button onClick={onClick}>{children}</button>; }
App
не нужно знать, что Toolbar
будет делать с onPlayMovie
или onUploadImage
. Это деталь реализации компонента Toolbar
. Здесь Toolbar
передает их как обработчики onClick
своим компонентам Button
, но позже он также может запускать их с помощью сочетания клавиш. Именование пропсов в честь специфичных в приложении действий, таких как onPlayMovie
, дает вам возможность изменить способ их использования позже.
Распространение события (Event Propagation)
Обработчики событий также будут перехватывать события от любых дочерних элементов вашего компонента. Мы говорим, что событие «пузырится» или «распространяется» вверх по дереву: оно начинается там, где произошло событие, а затем идет вверх по дереву. Этот<div>
содержит две кнопки. И <div>
, и каждая кнопка имеют свои собственные обработчики onClick
. Как вы думаете, какие обработчики сработают, когда вы нажмете кнопку?
Если вы нажмете на любую кнопку, ееexport default function () { return ( <div className="Toolbar" onClick={() => { alert('You clicked on the toolbar!'); }} > <button onClick={() => alert('Playing!')}>Play Movie</button> <button onClick={() => alert('Uploading!')}>Upload Image</button> </div> ); }
onClick
будет запущен первым, а затем onClick
родителя <div>
. Таким образом, появятся два сообщения. Если вы щелкнете по самому Toolbar
, запустится onClick
только родительского элемента <div>
.
Все события в React распространяются, кроме onScroll
, который работает только с тегом JSX, к которому вы его прикрепляете.
Остановка распространения события
Обработчики событий получают объект события в качестве единственного аргумента. По соглашению его обычно называютe
, что означает "event" ("событие"). Вы можете использовать этот объект для чтения информации о событии.
Этот объект события также позволяет остановить распространение. Если вы хотите, чтобы событие не достигало родительских компонентов, вам нужно вызвать e.stopPropagation()
, как это делает этот компонент Button
:
function Button({ onClick, children }) { return ( <button onClick={(e) => { e.stopPropagation(); onClick(); }} > {children} </button> ); } export default function Toolbar() { return ( <div className="Toolbar" onClick={() => { alert('You clicked on the toolbar!'); }} > <Button onClick={() => alert('Playing!')}>Play Movie</Button> <Button onClick={() => alert('Uploading!')}>Upload Image</Button> </div> ); }
- React вызывает обработчик
onClick
, переданный<button>
. - Этот обработчик, определенный в
Button
, делает следующее:- Вызывает
e.stopPropagation()
, предотвращая дальнейшее всплытие события. - Вызывает функцию
onClick
, которая является пропсом, переданным из компонентаToolbar
.
- Вызывает
- Эта функция, определенная в компоненте
Toolbar
, отображает собственное оповещение кнопки. - Поскольку распространение было остановлено, обработчик
onClick
родительского элемента<div>
не запускается.
e.stopPropagation()
при нажатии на кнопки теперь отображается только одно предупреждение (от <button>
), а не два из них (от <button>
и родительской Toolbar
<div>
). Клик по кнопке — это не то же самое, что клик по окружающему Toolbar
, поэтому остановка распространения имеет смысл для этого пользовательского интерфейса.
Захват событий
В редких случаях вам может понадобиться перехватывать все события дочерних элементов, даже если они остановили распространение. Например, может быть, вы хотите регистрировать каждый клик в аналитике, независимо от логики распространения. Вы можете сделать это, добавивCapture
в конце имени события:
Каждое событие распространяется в три этапа:<div onClickCapture={() => { /* запускается первым */ }} > <button onClick={(e) => e.stopPropagation()} /> <button onClick={(e) => e.stopPropagation()} /> </div>
- Он перемещается вниз, вызывая все обработчики
onClickCapture
. - Он запускает обработчик
onClick
выбранного элемента. - Он перемещается вверх, вызывая все обработчики
onClick
.
Передача обработчиков как альтернатива распространению
Обратите внимание, как этот обработчик кликов запускает код, а затем вызывает пропonClick
, переданное родителем:
Вы также можете добавить дополнительный код в этот обработчик перед вызовом родительского обработчика событияfunction Button({ onClick, children }) { return ( <button onClick={(e) => { e.stopPropagation(); onClick(); }} > {children} </button> ); }
onClick
. Этот шаблон обеспечивает альтернативу распространению. Это позволяет дочернему компоненту обрабатывать событие, а также позволяет родительскому компоненту указывать дополнительное поведение. В отличие от распространения, оно не происходит автоматически. Но преимущество этого паттерна в том, что вы можете четко проследить всю цепочку кода, которая выполняется в результате какого-то события.
Если вы полагаетесь на распространение и сложно отследить, какие обработчики выполняются и почему, попробуйте вместо этого этот подход.
Предотвращение поведения по умолчанию
С некоторыми событиями браузера связано поведение по умолчанию. Например, событие отправки<form>
, которое происходит при нажатии кнопки внутри него, по умолчанию перезагружает всю страницу:
Вы можете вызватьexport default function Signup() { return ( <form onSubmit={() => alert('Submitting!')}> <input /> <button>Send</button> </form> ); }
e.preventDefault()
для объекта события, чтобы этого не произошло:
Не путайтеexport default function Signup() { return ( <form onSubmit={(e) => { e.preventDefault(); alert('Submitting!'); }} > <input /> <button>Send</button> </form> ); }
e.stopPropagation()
и e.preventDefault()
. Они оба полезны, но не связаны между собой:
e.stopPropagation()
останавливает срабатывание обработчиков событий, прикрепленных к указанным выше тегам.e.preventDefault()
предотвращает поведение браузера по умолчанию для нескольких событий, которые его содержат.
Могут ли обработчики событий иметь побочные эффекты?
Да, могут. Обработчики событий — лучшее место для побочных эффектов. В отличие от функций рендеринга, обработчики событий не обязательно должны быть чистыми, поэтому это отличное место для того, чтобы что-то изменить — например, изменить значение инпута в ответ на ввод или изменить список в ответ на нажатие кнопки. Однако для того, чтобы изменить некоторую информацию, вам сначала нужно каким-то образом ее сохранить. В React это делается с помощью состояния - памяти компонента. Обо всем этом вы узнаете в следующей части.Резюме
- Вы можете обрабатывать события, передавая функцию в качестве пропса элементу, такому как
<button>
. - Обработчики событий должны передаваться, а не вызываться.
onClick={handleClick}
, а неonClick={handleClick()}
. - Вы можете определить функцию обработчика событий отдельно или встроенную (инлайн).
- Обработчики событий определяются внутри компонента, поэтому они могут получить доступ к пропсам.
- Вы можете объявить обработчик событий в родительском элементе и передать его в качестве пропса дочернему элементу.
- Вы можете определить свои собственные пропсы обработчика событий с именами, специфичными для приложения.
- События распространяются вверх. Вызовите
e.stopPropagation()
для первого аргумента, чтобы это предотвратить. - События могут иметь нежелательное поведение браузера по умолчанию. Вызовите
e.preventDefault()
, чтобы это предотвратить. - Явный вызов пропса обработчика событий из дочернего обработчика является хорошей альтернативой распространению события.