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

Question

我正在使用 reactjs。我想在带有 react-alert 组件的组件中显示警报。 https://www.npmjs.com/package/react-alert 我按照 .

给出的方式包装 index.js 文件

但是当我尝试在表单中使用 alert.show ("sdfsdfsdfsf") 时，出现以下错误。

我是否在表单中显示消息？

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'));

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>
)
}

Answer 1

您正在使用：

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

但是您需要使用一个事件来显示该警报。

改用这个：

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

Answer 2

除非用花括号括起来，否则不能在 render 方法中调用函数/方法。 jsx 中需要花括号，让解析器知道你想要运行一些 javascript 代码。

尝试以下操作：

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

npm 上的 react-alert 包在使用 onClick 处理程序时也有一个很好的例子 https://www.npmjs.com/package/react-alert

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

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

export default App

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

How can I display messages in component with react-alert?

javascript

alert

toast

reactjs

react-native