web-dev-qa-db-fra.com

Comment afficher les messages dans le composant avec react-alert?

J'utilise reactjs. Je veux afficher l'alerte dans le composant avec le composant react-alert. https://www.npmjs.com/package/react-alert J'encapsule le fichier index.js comme indiqué sur.

mais lorsque j'essaie d'utiliser alert.show ("sdfsdfsdfsf") dans le formulaire, j'obtiens l'erreur suivante.

afficher un message dans un formulaire?

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>
)
}
javascriptreactjsreact-nativealerttoast
3
Fatih mzm

Vous ne pouvez pas appeler une fonction/méthode à l'intérieur de la méthode de rendu à moins qu'elle ne soit entourée d'accolades. Les accolades sont nécessaires dans jsx pour indiquer à l'analyseur que vous souhaitez exécuter du code javascript.

Essayez ce qui suit:

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

Le package react-alert sur npm a également un bel exemple lors de l'utilisation d'un gestionnaire 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
0
sbodi