如何在基于类的组件中的函数内引发反应警报

Question

使用 react-alert 模块进行警报 我的代码看起来像这样 - index.js：

const options = {
    // you can also just use 'bottom center'
    position: positions.TOP_CENTER,
    timeout: 5000,
    offset: '30px',
    type: types.ERROR,
    // you can also just use 'scale'
    transition: transitions.FADE
  }
ReactDOM.render(<AlertProvider template={AlertTemplate} {...options}>
    <App /></AlertProvider>, document.getElementById('root'));

App.js

class App extends React.Component { //then my state, functions, constructors,
//here is the problem
nextClicked = (e) => {
    if (//something) {
      if (//something) {

      const alert = useAlert();
      alert.show("ERROR MESSAGE!!!");
  }
} // etc
export default withAlert()(App)

基本上，我得到了错误 无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能由于以下原因之一而发生： 1. React 和渲染器的版本可能不匹配（例如 React DOM） 2. 你可能违反了 Hooks 的规则 3. 你可能在同一个应用程序中拥有多个 React 副本 有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/warnings/invalid-hook-call-warning.html。

Answer 1

来自their docs，它说您可以将它与更高阶的组件一起使用。所以，如果你 从 react-alert 中导入 withAlert 模块，您可以在导出时包装组件。再次，检查 github 上的文档，这已涵盖。

将示例从文档转换为类组件，您会得到：

import React from 'react'
import { withAlert } from 'react-alert'

class App extends React.component {
   constructor(props) {
    super(props);
  }
  render { 
  return (
  <button
    onClick={() => {
      this.props.alert.show('Oh look, an alert!')
    }}
  >
    Show Alert
  </button>
  )
 }
}

export default withAlert()(App)

因为您将组件包装在 HOC 中，所以您可以访问 alert 属性。