React钩子继承

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。aturan23正在寻找来自信誉良好的来源的答案。

我正在使用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提供代码，我们将尝试提供解决方案:)