Реагировать на наследование крючка

Question

Я использую функцию Wrapper как множественное наследование для class. Wrapper функция:

const Wrapper = (SuperClass) => class extends SuperClass {
  createNotification = (type, message, className = 'filled') => {
    switch (type) {
      case 'success':
        NotificationManager.primary(
          message,
          'Primary Notification',
          5000,
          null,
          null,
          className,
        );
        break;
    ...
    default:
        NotificationManager.info('Info message');
        break;
    }
};

И используйте это так:

class Detail extends Wrapper(Component) {
 someFunction = () => {
  this.createNotification('success', 'Saved!');
 }
 render() {
   ...
 }
}

Мой вопрос заключается в том, как использовать его на hook компонентах. Есть идеи?

Answer 1

Вы не можете использовать хуки внутри компонентов класса. Но я постараюсь предоставить решение.

Учитывая тот факт, что вы в основном хотите иметь возможность вызывать createNotification из любого компонента, и если мы посмотрим на ваш код, мы действительно сможем добиться этого, используя простая служебная функция.

Ваша createNotification функция вызывает только NotificationManager, который, я считаю, доступен для вашего кода глобально (я не вижу остальной части вашего кода, но я предполагаю, что вы просто импортируете его и используете это).

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

import NotificationManager from 'somewhere';

module.exports.createNotification = (type, message, className = 'filled') => {
    switch (type) {
      case 'success':
        NotificationManager.primary(
          message,
          'Primary Notification',
          5000,
          null,
          null,
          className,
        );
        break;
    ...
    default:
        NotificationManager.info('Info message');
        break;
    }

// import it and use it inside any component without introducing inheritance

import { createNotification } from 'somewhere-else'

// use it !

Если это не работает, укажите код для вашего NotificationManager, и мы постараемся предоставить решение :)