您将如何在 React.Component class 中使用条件挂钩

Question

根据文档，钩子不能在 class 组件内使用。 但是有一些方法可以使用高阶组件： 如何在 React 经典 `class` 组件中使用 React 钩子？ . 然而，提供的这个答案并没有解决在 function 调用上调用的钩子的情况。 从以下位置获取这个简单的 Toast 钩子： https://jossmac.github.io/react-toast-notifications/ 。 我想调用形式为 class 的钩子：

```
    class MyClass extends React.Component {
        
        onTapButton = () => {
               
            if(conditionTrue){
                addToast('hello world', {
                     appearance: 'error',
                     autoDismiss: true,
                })
            } 
        }
        
        render(){ ... }

   }
```

没有在 class 方法中使用const { addToast } = useToasts()就无法调用addToast ，这会引发错误。

Answer 1

您可以使用withToastManager HOC 来归档该工作

这是一个例子

import React, { Component } from 'react';
import { withToastManager } from 'react-toast-notifications';

class ConnectivityListener extends Component {
  state = { isOnline: window ? window.navigator.onLine : false };

  // NOTE: add/remove event listeners omitted for brevity

  onlineCallback = () => {
    this.props.toastManager.remove(this.offlineToastId);
    this.offlineToastId = null;
  };
  offlineCallback = id => {
    this.offlineToastId = id;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    const { isOnline } = this.state;

    if (prevState.isOnline !== isOnline) {
      return { isOnline };
    }

    return null;
  }
  componentDidUpdate(props, state, snapshot) {
    if (!snapshot) return;

    const { toastManager } = props;
    const { isOnline } = snapshot;

    const content = (
      <div>
        <strong>{isOnline ? 'Online' : "Offline"}</strong>
        <div>
          {isOnline
            ? 'Editing is available again'
            : 'Changes you make may not be saved'}
        </div>
      </div>
    );

    const callback = isOnline
      ? this.onlineCallback
      : this.offlineCallback;

    toastManager.add(content, {
      appearance: 'info',
      autoDismiss: isOnline,
    }, callback);
  }
  render() {
    return null;
  }
}

export default withToastManager(ConnectivityListener);

有关更多信息，您还可以在此处找到