Javascript 如何在带有react alert的组件中显示消息？

我用的是reactjs。 我想用react alert组件在组件中显示警报。 我包装index.js文件，如中所示

但是，当我尝试在表单中使用

alert.show（“sdfsdfsf”）

时，会出现以下错误

我是否在表单中显示消息

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App/App';

import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'

import { Provider } from 'react-redux';

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

从“React”导入React；
从“react dom”导入react dom；
从“./App/App”导入应用程序；
从“react alert”导入{转换、定位、提供程序为AlertProvider}
从“react alert template basic”导入AlertTemplate
从'react redux'导入{Provider}；
常量选项={
//您也可以只使用“底部中心”
位置：positions.BOTTOM_CENTER，
超时：5000，
偏移量：“30px”，
//你也可以只使用“比例”
转换：transitions.SCALE
};
ReactDOM.render(
,
document.getElementById（'root'）；

myForm.js

import { useAlert } from "react-alert";
const alert = useAlert();
class myForm extends Component {
  constructor(props) {
    super(props);
.........

render() {
return(
<div> alert.show("Alert test") </div>
)
}

从“react alert”导入{useAlert}；
const alert=useAlert（）；
类myForm扩展组件{
建造师（道具）{
超级（道具）；
.........
render（）{
返回(
警报。显示（“警报测试”）
)
}

您正在使用：

render(){                                                            
  return(
  <div> alert.show("Alert test") </div>                                    
   )
}

render（）{
返回(
警报。显示（“警报测试”）
)
}

但您需要使用事件来显示该警报

改用这个：

render(){ 
  return(                                                                
    <div                                                             
      onClick={() => 
        {alert.show('Alert test')}
      }
    />
  )
}

render（）{
报税表（
{alert.show（'alert test'）}
}
/>
)
}

不能在render方法中调用函数/方法，除非它用大括号包装。jsx中需要大括号，以便让解析器知道您想要运行一些javascript代码

请尝试以下操作：

render() {
   return (
     <div>{alert.show("Alert test")}</div>
   );
}

render（）{
返回(
{alert.show（“警报测试”）}
);
}

npm上的react alert包在使用onClick处理程序时也有一个很好的示例

const-App=（）=>{
const alert=useAlert（）
返回(
{
警报。显示（“哦，看，警报！”）
}}
>
显示警惕
)
}
导出默认应用程序

钩子调用无效。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下：1。React和渲染器（如React DOM）2的版本可能不匹配。你可能违反了Hooks 3的规则。同一应用程序中可能有多个React副本50 | const alert=useAlert（）；51 | 52 |类CustomerDebt扩展组件{53 |构造函数（props）类CustomerDebt扩展组件{构造函数（props）{super（props）；如何在其中调用它？如图所示的错误。您需要在返回语句之前将常量警报移动到呈现方法中。``类myForm扩展组件{constructor（props）{super（props）；}render（）{const alert=useAlert（）；return（alert.show（“alert test”））；}您试图在类组件内部使用钩子。根据react文档（）。您需要更改组件以遵循功能组件模式，或者使用与类一起使用的库版本

const App = () => {
  const alert = useAlert()

  return (
    <button
      onClick={() => {
        alert.show('Oh look, an alert!')
      }}
    >
      Show Alert
    </button>
  )
}

export default App