Новости и обновления в Telegram
rutube
Полезные видео о фронтенде. Подпишись на Rutube

Микрофронтенд и Module Federation

2 года назад·6 мин. на чтение

Module Federation - это плагин для Webpack. С его помощью можно разбивать приложение на микрофронтенды, подключив их в хост приложение.

Здесь микрофронтенды - это несколько отдельных сборок. Вместе они формируют одно приложение. Эти отдельные сборки действуют как контейнеры и могут предоставлять и использовать код между сборками, создавая единое унифицированное приложение.

Низкоуровневые концепции

Различаются два вида модулей - локальные и удаленные модули. Локальные модули — это обычные модули, которые являются частью текущей сборки. Удаленные модули (remote modules) — это модули, которые не являются частью текущей сборки, но загружаются во время выполнения из удаленного контейнера. Загрузка удаленных модулей считается асинхронной операцией. Невозможно использовать удаленный модуль без загрузки его чанка. Операция загрузки чанка обычно является вызовом import(), но также поддерживаются более старые конструкции, такие как require.ensure или require([...])). Контейнер создается с помощью точки входа контейнера, которая предоставляет асинхронный доступ к определенным модулям. Доступ к предоставляемым (expose) моделям разделен на два этапа:
  1. загрузка модуля (асинхронная)
  2. выполнение модуля (синхронная).
Шаг 1 будет выполнен во время загрузки чанка. Шаг 2 будет выполнен во время выполнения модуля, чередующегося с другими (локальными и удаленными) модулями. Таким образом, порядок выполнения не зависит от преобразования модуля из локального в удаленный или наоборот. Возможно вложение контейнеров. Контейнеры могут использовать модули из других контейнеров. Также возможны циклические зависимости между контейнерами.

Высокоуровневые концепции

Каждая сборка действует как контейнер, а также потребляет другие сборки в качестве контейнеров. Таким образом, каждая сборка может получить доступ к любому другому предоставленному модулю, загрузив его из своего контейнера. Общие модули — это модули, которые являются переопределяемыми и предоставляются в качестве переопределений для вложенных контейнеров. Они обычно указывают на один и тот же модуль в каждой сборке, например, на одну и ту же библиотеку. Параметр packageName позволяет задать имя пакета для поиска requiredVersion. Он автоматически выводится для запросов модуля по умолчанию. Установите requiredVersion в false, когда автоматический вывод должен быть отключен.

Основные части

ContainerPlugin (низкий уровень)

Этот плагин создает дополнительную запись контейнера с указанными открытыми модулями.

ContainerReferencePlugin (низкий уровень)

Этот плагин добавляет конкретные ссылки на контейнеры как внешние и позволяет импортировать удаленные модули из этих контейнеров. Он также вызывает API override этих контейнеров для предоставления им переопределений. Локальные переопределения (через __webpack_override__ или override API когда сборка является контейнером) и указанные переопределения предоставляются всем контейнерам, на которые имеются ссылки.

ModuleFederationPlugin (высокий уровень)

ModuleFederationPlugin объединяет ContainerPlugin и ContainerReferencePlugin.

Какие цели преследует Module Federation

  • Должна быть возможность предоставлять и использовать любой тип модуля, поддерживаемый webpack.
  • При загрузке чанков должно загружаться все необходимое параллельно (за один запрос к серверу).
  • Управление от потребителя к контейнеру
    • Переопределение модулей представляет собой однонаправленную операцию.
    • Родственные контейнеры не могут переопределять модули друг друга.
  • Концепция должна быть независимой от среды.
    • Можно использовать в web, Node.js и т. д.
  • Относительный и абсолютный запрос в shared:
    • Всегда будет предоставлен, даже если не используется.
    • Будет разрешаться относительно config.context.
    • Не использует requiredVersion по умолчанию.
  • Запросы модулей в shared:
    • Предоставляются только тогда, когда они используются.
    • Будет соответствовать всем используемым равным запросам модулей в вашей сборке.
    • Предоставит все соответствующие модули.
    • Будет извлекать requiredVersion из package.json в этой позиции в графе.
    • Может предоставлять и использовать несколько различных версий при наличии вложенных node_modules.
  • Запросы модулей с / в shared будут сопоставлять все запросы модулей с этим префиксом.

Примеры использования

Отдельные сборки для каждой страницы

Каждая страница одностраничного приложения предоставляется из контейнерной сборки в отдельной сборке. Оболочка приложения (application shell) также представляет собой отдельную сборку, ссылающуюся на все страницы как на удаленные модули. Таким образом, каждая страница может быть развернута отдельно. Оболочка приложения заново развертывается при обновлении маршрутов или добавлении новых маршрутов. Оболочка приложения определяет часто используемые библиотеки как разделяемые модули (shared), чтобы избежать их дублирования в сборках страниц.

Библиотека компонентов в качестве контейнера

Многие приложения имеют общую библиотеку компонентов, которая может быть построена как контейнер с каждым отдельным компонентом. Каждое приложение использует компоненты из контейнера библиотеки компонентов. Изменения в библиотеке компонентов можно развертывать отдельно без необходимости повторного развертывания всех приложений. Приложение автоматически использует обновленную версию библиотеки компонентов.

Динамические удаленные контейнеры

Интерфейс контейнера поддерживает методы get и init. init — это async метод, который вызывается с одним аргументом: объектом общей области (shared scope). Этот объект используется в качестве общей области в удаленном контейнере и заполняется предоставленными модулями от хоста. Его можно использовать для динамического подключения удаленных контейнеров к контейнеру хоста во время выполнения. 
// init.js

(async () => {
  // Инициализирует общую область. Заполняет его предоставленными модулями 
  // из текущего билда и из удаленных билдов
  await __webpack_init_sharing__('default');
  const container = window.someContainer; // или получить контейнер откуда-либо еще
  // Проинициализируйте контейнер, он может предоставлять общие модули
  await container.init(__webpack_share_scopes__.default);
  const module = await container.get('./module');
})();
Контейнер пытается предоставить общие модули, но если общий модуль уже использовался, предупреждение и предоставленный общий модуль будут проигнорированы. Контейнер может по-прежнему использовать его в качестве запасного варианта. Таким образом, вы можете динамически загружать A/B-тест, который предоставляет другую версию общего модуля. Убедитесь, что контейнер загружен, прежде чем пытаться динамически подключить удаленный контейнер. Пример: 
// init.js

function loadComponent(scope, module) {
  return async () => {
    // Инициализирует общую область. Заполняет его предоставленными модулями 
    // из текущего билда и из удаленных билдов
    await __webpack_init_sharing__('default');
    const container = window[scope]; // или получить контейнер откуда-либо еще
    // Проинициализируйте контейнер, он может предоставлять общие модули
    await container.init(__webpack_share_scopes__.default);
    const factory = await window[scope].get(module);
    const Module = factory();
    return Module;
  };
}

loadComponent('abtests', 'test123');

Динамические удаленные модули на основе промисов

Как правило, удаленные модули настраиваются с использованием URL-адресов, как в этом примере: 
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};
Но вы также можете передать промис в этот модуль, который будет зарезолвлен во время выполнения. Вы должны зарезолвить этот промис с помощью любого модуля, который соответствует интерфейсу get/init, описанному выше. Например, если вы хотите передать, какую версию fedarated модуля вы должны использовать, с помощью параметра запроса вы можете сделать что-то вроде следующего: 
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: `promise new Promise(resolve => {
      const urlParams = new URLSearchParams(window.location.search)
      const version = urlParams.get('app1VersionParam')
      // Эта часть зависит от того как вы планируете хостить
      // и версионировать ваши federated модули
      const remoteUrlWithVersion = 'http://localhost:3001/' + version + '/remoteEntry.js'
      const script = document.createElement('script')
      script.src = remoteUrlWithVersion
      script.onload = () => {
        // внедренный скрипт загружен и доступен через объект window
        // теперь можно зарезолвить Promise
        const proxy = {
          get: (request) => window.app1.get(request),
          init: (arg) => {
            try {
              return window.app1.init(arg)
            } catch(e) {
              console.log('remote container already initialized')
            }
          }
        }
        resolve(proxy)
      }
      // внедрим этот скрипт с src с версионированным remoteEntry.js
      document.head.appendChild(script);
    })
    `,
      },
      // ...
    }),
  ],
};
Обратите внимание, что при использовании этого API необходимо зарезолвить объект, содержащий API get/init.

Динамический publicPath

Установка publicPath

Можно разрешить хосту задавать publicPath удаленного модуля во время выполнения, предоставляя метод из этого удаленного модуля. Этот подход особенно полезен при подключении независимо развернутых дочерних приложений по подпути домена узла. Сценарий: У вас есть хост приложение, размещенное на https://my-host.com/app/*, и дочернее приложение, размещенное на https://foo-app.com. Дочернее приложение также монтируется на хост-домене, следовательно, ожидается, https://foo-app.com будет доступно через https://my-host.com/app/foo-app, а запросы https://my-host.com/app/foo-app/* перенаправляются https://foo-app.com/* через прокси-сервер. Пример: 
// webpack.config.js (удаленный)

module.exports = {
  entry: {
    remote: './public-path',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote', // это имя должно совпадать с именем точки входа
      exposes: ['./public-path'],
      // ...
    }),
  ],
};
public-path.js (remote)

export function set(value) {
  __webpack_public_path__ = value;
}
// src/index.js (host)

const publicPath = await import('remote/public-path');
publicPath.set('/your-public-path');

//bootstrap app  e.g. import('./bootstrap.js')

Вывод publicPath из скрипта

Можно вывести publicPath из тега script из document.currentScript.src и задать его с переменной __webpack_public_path__ во время выполнения. Пример: 
// webpack.config.js (удаленный)

module.exports = {
  entry: {
    remote: './setup-public-path',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote', // this name needs to match with the entry name
      // ...
    }),
  ],
};
setup-public-path.js (удаленный)

// вычислите publicPath и установите его в  __webpack_public_path__
__webpack_public_path__ = document.currentScript.src + '/../';
Существует также значение 'auto', доступное для output.publicPath, которое автоматически определяет publicPath для вас.
FrontendJavaScriptWebpackМикрофронтенд

Реакция на события в React компонентах

год назад·8 мин. на чтение

React позволяет добавлять обработчики событий в JSX. Обработчики событий — это ваши собственные функции, которые будут запускаться в ответ на такие действия, как клик, наведение курсора, фокусировка на поле ввода формы и т.д.

Содержание туториала по React React позволяет добавлять обработчики событий в JSX. Обработчики событий — это ваши собственные функции, которые будут запускаться в ответ на такие действия, как клик, наведение курсора, фокусировка на поле ввода формы и т.д.

Добавление обработчиков событий

Чтобы добавить обработчик событий, сначала нужно определить функцию, а затем передать ее в качестве пропса соответствующему тегу JSX. Например, вот кнопка, которая пока ничего не делает: 
export default function Button() {
  return <button>I don't do anything</button>;
}
Вы можете заставить компонент показывать сообщение, когда пользователь нажимает на кнопку. Для этого нужно выполнить три следующих шага:
  1. Объявите функцию с именем handleClick внутри компонента Button.
  2. Реализуйте логику внутри этой функции (используйте alert для отображения сообщения).
  3. Добавьте 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>
  );
}
 При нажатии на кнопку:
  1. React вызывает обработчик onClick, переданный <button>.
  2. Этот обработчик, определенный в Button, делает следующее:
    • Вызывает e.stopPropagation(), предотвращая дальнейшее всплытие события.
    • Вызывает функцию onClick, которая является пропсом, переданным из компонента Toolbar.
  3. Эта функция, определенная в компоненте Toolbar, отображает собственное оповещение кнопки.
  4. Поскольку распространение было остановлено, обработчик onClick родительского элемента <div> не запускается.
В результате e.stopPropagation() при нажатии на кнопки теперь отображается только одно предупреждение (от <button>), а не два из них (от <button> и родительской Toolbar <div>). Клик по кнопке — это не то же самое, что клик по окружающему Toolbar, поэтому остановка распространения имеет смысл для этого пользовательского интерфейса.

Захват событий

В редких случаях вам может понадобиться перехватывать все события дочерних элементов, даже если они остановили распространение. Например, может быть, вы хотите регистрировать каждый клик в аналитике, независимо от логики распространения. Вы можете сделать это, добавив Capture в конце имени события: 
<div
  onClickCapture={() => {
    /* запускается первым */
  }}
>
  <button onClick={(e) => e.stopPropagation()} />
  <button onClick={(e) => e.stopPropagation()} />
</div>
Каждое событие распространяется в три этапа:
  1. Он перемещается вниз, вызывая все обработчики onClickCapture.
  2. Он запускает обработчик onClick выбранного элемента.
  3. Он перемещается вверх, вызывая все обработчики 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(), чтобы это предотвратить.
  • Явный вызов пропса обработчика событий из дочернего обработчика является хорошей альтернативой распространению события.
FrontendReactТуториал по React
logo

itdevjournal