{"id":6092,"date":"2024-12-16T12:54:37","date_gmt":"2024-12-16T12:54:37","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-refs-composants-classe-react\/"},"modified":"2024-12-16T12:54:41","modified_gmt":"2024-12-16T12:54:41","slug":"utiliser-refs-composants-classe-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-refs-composants-classe-react\/","title":{"rendered":"10.4 Utiliser les Refs dans les Composants Classe React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Refs Composants Classe React<\/strong> jouent un r\u00f4le essentiel pour acc\u00e9der directement aux \u00e9l\u00e9ments DOM et pour manipuler des composants React de mani\u00e8re imp\u00e9rative. Comprendre comment utiliser les <strong>Refs dans les composants classe React<\/strong> peut enrichir consid\u00e9rablement l&rsquo;interactivit\u00e9 et la r\u00e9activit\u00e9 de vos applications. Apprenez comment elles fonctionnent et comment les impl\u00e9menter \u00e0 travers des exemples pratiques de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Refs Composants Classe React<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706117885?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Dans React, les <strong>Refs Composants Classe React<\/strong> sont utilis\u00e9es pour acc\u00e9der aux \u00e9l\u00e9ments DOM ou aux instances de composants React. Elles sont particuli\u00e8rement utiles lorsque vous devez g\u00e9rer le focus, s\u00e9lectionner du texte, ou d\u00e9clencher des animations de mani\u00e8re imp\u00e9rative. En utilisant les Refs, vous pouvez outrepasser le cycle de rendu React pour interagir directement avec le DOM, tout en vous assurant que votre code reste maintenable et performant.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Ref dans un Composant Classe React<\/h3>\n\n\n\n<p>Pour cr\u00e9er une Ref dans un composant classe, vous pouvez utiliser l&rsquo;API <code>React.createRef()<\/code>. Voici comment d\u00e9finir et utiliser une Ref pour acc\u00e9der \u00e0 un \u00e9l\u00e9ment DOM :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { Component } from 'react';\n\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.myRef = React.createRef(); \/\/ Utilisation de createRef\n  }\n\n  componentDidMount() {\n    \/\/ Acc\u00e9der \u00e0 l'\u00e9l\u00e9ment DOM directement via Refs Composants Classe React\n    this.myRef.current.focus();\n  }\n\n  render() {\n    return <input type=\"text\" ref={this.myRef} \/>;\n  }\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Refs pour Contr\u00f4ler des Composants Enfants<\/h3>\n\n\n\n<p>En plus d&rsquo;acc\u00e9der aux \u00e9l\u00e9ments DOM, les <strong>Refs Composants Classe React<\/strong> peuvent \u00e9galement \u00eatre utilis\u00e9es pour interagir avec des composants React enfants. Cela peut \u00eatre particuli\u00e8rement utile pour d\u00e9clencher des m\u00e9thodes sur des composants enfants de mani\u00e8re imp\u00e9rative :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { Component } from 'react';\n\nclass ChildComponent extends Component {\n  doSomething() {\n    console.log(\"M\u00e9thode de l'enfant appel\u00e9e !\");\n  }\n\n  render() {\n    return <div>Composant Enfant<\/div>;\n  }\n}\n\nclass ParentComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.childRef = React.createRef(); \/\/ Init Ref pour le composant enfant\n  }\n\n  componentDidMount() {\n    \/\/ Appeler une m\u00e9thode sur le composant enfant via Refs\n    this.childRef.current.doSomething();\n  }\n\n  render() {\n    return <ChildComponent ref={this.childRef} \/>;\n  }\n}\n\nexport default ParentComponent;\n<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Cas d&rsquo;Utilisations Pratiques des Refs<\/h3>\n\n\n<p>Les <strong>Refs dans React<\/strong> sont souvent utilis\u00e9es pour int\u00e9grer des biblioth\u00e8ques tierces, g\u00e9rer des animations, et manipuler les \u00e9l\u00e9ments de formulaire de mani\u00e8re avanc\u00e9e. Par exemple, vous pouvez cr\u00e9er une vid\u00e9o ou un composant d&rsquo;animation qui est contr\u00f4l\u00e9 directement via une Ref :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { Component } from 'react';\n\nclass VideoPlayer extends Component {\n  constructor(props) {\n    super(props);\n    this.videoRef = React.createRef(); \/\/ Video Ref\n  }\n\n  playVideo = () => {\n    this.videoRef.current.play();\n  };\n\n  pauseVideo = () => {\n    this.videoRef.current.pause();\n  };\n\n  render() {\n    return (\n      <div>\n        <video ref={this.videoRef} src=\"your-video-file.mp4\" width=\"320\" height=\"240\" \/>\n        <button onClick={this.playVideo}>Play<\/button>\n        <button onClick={this.pauseVideo}>Pause<\/button>\n      <\/div>\n    );\n  }\n}\n\nexport default VideoPlayer;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Meilleurs Pratiques avec les Refs dans React<\/h3>\n\n\n\n<p>Bien que les <strong>Refs Composants Classe React<\/strong> soient puissantes, leur utilisation doit rester rare et judicieuse. Voici quelques meilleures pratiques pour int\u00e9grer les Refs efficacement dans vos projets :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilisez les Refs principalement pour les int\u00e9grations directes avec le DOM qui ne peuvent pas \u00eatre accomplies de mani\u00e8re d\u00e9clarative avec React.<\/li>\n\n\n\n<li>Ne vous en servez pas pour un mod\u00e8le de donn\u00e9es. Le mod\u00e8le de donn\u00e9es de l&rsquo;application est mieux g\u00e9r\u00e9 par React via l&rsquo;\u00e9tat et les propri\u00e9t\u00e9s.<\/li>\n\n\n\n<li>Assurez-vous que l&rsquo;utilisation des Refs ne complique pas le d\u00e9bogage en cr\u00e9ant des effets secondaires inattendus.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les Refs Composants Classe React<\/h2>\n\n\n\n<p>Les <strong>Refs dans les composants classe React<\/strong> sont un outil pr\u00e9cieux pour interagir directement avec le DOM ou g\u00e9rer les instances de composants sp\u00e9cifiques de mani\u00e8re imp\u00e9rative. Bien que puissantes, leur utilisation doit \u00eatre judicieuse pour garantir que votre application reste idiomatique et maintenable. En explorant davantage les Refs, vous pourrez cr\u00e9er des interfaces utilisateur plus robustes et r\u00e9actives. Pour aller plus loin, consid\u00e9rez l&rsquo;apprentissage des <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-utiliser-context-api-react\">concepts avanc\u00e9s du Context API dans React<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\">les React Hooks<\/a>.<\/p>\n\n\n\n<p>D\u00e9couvrez \u00e9galement comment les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-refs-react-tutoriel\">Refs sont utilis\u00e9es dans d&rsquo;autres contextes React<\/a> pour am\u00e9liorer la manipulation des composants. Pour plus d&rsquo;informations sur la gestion de l&rsquo;\u00e9tat avec React, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\">l&rsquo;utilisation de React Hooks<\/a>. En outre, si vous d\u00e9butez, apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">cr\u00e9er votre premi\u00e8re application React<\/a> peut vous \u00eatre tr\u00e8s b\u00e9n\u00e9fique.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Offer\" title=\"\"><\/a><\/figure>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Refs Composants Classe React jouent un r\u00f4le essentiel pour acc\u00e9der directement aux \u00e9l\u00e9ments DOM et pour manipuler des composants React de mani\u00e8re imp\u00e9rative. Comprendre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3282,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6092","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6092"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6092\/revisions"}],"predecessor-version":[{"id":6093,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6092\/revisions\/6093"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3282"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}