J'ai trouvé beaucoup d'exemples en travaillant avec des composants de classe et en appelant des fonctions en ligne dans JSX. Ici, vous pouvez lier la fonction dans le constructeur. Comment faites-vous la même chose avec les composants de fonction? J'ai suivi qui échoue avec "Impossible de lire la propriété d'undefined":
3 Réponses :
Avec les fonctions fléchées, il n'y a pas de liaison de this . Au lieu de cela, vous pouvez vous référer directement à la variable locale getSeverityLevelText sans la préfixer avec this. .
En fait, je viens de tester à nouveau. Aucune idée de ce que j'ai fait. Ça marche. Merci.
Avec les composants fonctionnels, nous n'utilisons pas du tout ce mot-clé :)
const getServerityLevelText = useCallback((severityLevel) => {
return "Works";
}, []);
Encore une chose ici à propos des "méthodes" du composant fonctionnel: si ces "méthodes" placées dans le corps du composant fonctionnel, elles recréent chaque rendu (et si vous les passez aux enfants, elles re-rendent aussi, à cause de la mise à jour des accessoires).
Donc, si vous ne voulez pas utiliser de classe et que vous aimez le code optimisé, vous devez encapsuler vos "méthodes" comme getServerityLevelText dans useCallback React hook.
getServerityLevelText(1)
Je n'ai aucune idée de ce que je fais aujourd'hui. J'ai commencé sans ça et j'ai eu l'erreur. Je viens de tester à nouveau et vous avez absolument raison. Cela fonctionne sans cela. Je ne sais pas ce que je faisais. Merci.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
const App = () => {
const handleOnClick = () =>
{
console.log("Here");
}
return (
<div>
<Button onClick={handleOnClick}>Here</Button>
<div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
Ajoutez également votre code