在类组件中使用 React Toast 通知

Question

我是 React 新手，想在我的项目中使用 react toast 通知官方文档，在他们的官方网站上，他们使用 react 钩子并使用它来执行通知，但我想在 componentWillMount 或 componentDidMount 的类组件中使用它。有什么办法可以做到这一点，或者我必须使用其他吐司组件。谢谢。

Answer 1

您可以创建一个更高阶的组件，例如withToast在基于类的组件中添加该道具

import { useToasts } from 'react-toast-notifications'

function withToast(Component) {
  return function WrappedComponent(props) {
    const toastFuncs = useToasts()
    return <Component {...props} {...toastFuncs} />;
  }
}

//In you class component file

class MyComponent extends Component {

  componentDidMount () {
    this.props.addToast('Hello Toast');
  }
  
  render () {
    return <div>Toasts</div>
  }
}

export default withToast(MyComponent);