{"id":5922,"date":"2024-09-10T20:14:17","date_gmt":"2024-09-10T20:14:17","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/propriete-children-react-utilisation\/"},"modified":"2024-09-10T20:14:21","modified_gmt":"2024-09-10T20:14:21","slug":"propriete-children-react-utilisation","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/propriete-children-react-utilisation\/","title":{"rendered":"3.6 La Propri\u00e9t\u00e9 Children en React : Utilisation"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Children Propri\u00e9t\u00e9 React<\/strong> est une fonctionnalit\u00e9 puissante qui vous permet de composer des composants. Comprendre comment utiliser la <strong>Propri\u00e9t\u00e9 Children en React<\/strong> vous permet de cr\u00e9er des interfaces utilisateur plus flexibles et r\u00e9utilisables. Plongeons dans son utilisation et voyons comment l&rsquo;impl\u00e9menter \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Propri\u00e9t\u00e9 Children en 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\/706056293?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>En React, la propri\u00e9t\u00e9 <code>children<\/code> vous permet de transmettre des composants et des \u00e9l\u00e9ments comme contenu enfants \u00e0 d&rsquo;autres composants. Cela permet de rendre les composants plus dynamiques et r\u00e9utilisables, car ceux-ci peuvent accepter d&rsquo;autres composants en tant que contenu. Pour apprendre davantage sur la structure et les avantages des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">Single Page Applications<\/a> et des <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">Multi Page Applications<\/a> en React, cliquez sur les liens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants Avec la Propri\u00e9t\u00e9 Children<\/h3>\n\n\n\n<p>Pour utiliser la propri\u00e9t\u00e9 <code>children<\/code>, il suffit de d\u00e9finir un composant parent qui rendra ses <code>children<\/code>. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nconst ParentComponent = ({ children }) => {\n  return (\n    <div className=\"parent\">\n      <h1>Je suis le composant parent<\/h1>\n      <div className=\"child-container\">\n        {children}\n      <\/div>\n    <\/div>\n  );\n};\n\nexport default ParentComponent;\n<\/code><\/pre>\n\n\n\n<p>Le composant <code>ParentComponent<\/code> rend ses enfants dans une div avec la classe <code>child-container<\/code>. Pour utiliser ce composant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport ParentComponent from '.\/ParentComponent';\nimport ChildComponent from '.\/ChildComponent';\n\nconst App = () => {\n  return (\n    <ParentComponent>\n      <ChildComponent \/>\n      <p>Je suis un enfant direct du ParentComponent.<\/p>\n    <\/ParentComponent>\n  );\n};\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Passer des Propri\u00e9t\u00e9s aux Enfants<\/h3>\n\n\n\n<p>Parfois, il est n\u00e9cessaire de passer des propri\u00e9t\u00e9s aux enfants d&rsquo;un composant. Bien que la propri\u00e9t\u00e9 <code>children<\/code> ne transmette que les enfants eux-m\u00eames, vous pouvez utiliser la fonction <code>React.Children.map<\/code> pour cloner et modifier les enfants avant de les rendre :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nconst ParentComponent = ({ children }) => {\n  const modifiedChildren = React.Children.map(children, child => {\n    return React.cloneElement(child, { someProp: 'someValue' });\n  });\n\n  return (\n    <div className=\"parent\">\n      <h1>Je suis le composant parent<\/h1>\n      <div className=\"child-container\">\n        {modifiedChildren}\n      <\/div>\n    <\/div>\n  );\n};\n\nexport default ParentComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e de la Propri\u00e9t\u00e9 Children<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>children<\/code> peut \u00eatre utilis\u00e9e de mani\u00e8re plus sophistiqu\u00e9e pour cr\u00e9er des composants r\u00e9utilisables avec des zones nomm\u00e9es pour les enfants. Cela se fait souvent en utilisant des propri\u00e9t\u00e9s suppl\u00e9mentaires pour sp\u00e9cifier o\u00f9 placer les enfants. Voici un exemple avec plusieurs sections nomm\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nconst Layout = ({ header, main, footer }) => {\n  return (\n    <div className=\"layout\">\n      <header>{header}<\/header>\n      <main>{main}<\/main>\n      <footer>{footer}<\/footer>\n    <\/div>\n  );\n};\n\nexport default Layout;\n<\/code><\/pre>\n\n\n\n<p>Pour utiliser ce composant de mise en page :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport Layout from '.\/Layout';\n\nconst App = () => {\n  return (\n    <Layout\n      header={<h1>Ent\u00eate<\/h1>}\n      main={<p>Contenu principal<\/p>}\n      footer={<p>Pied de page<\/p>}\n    \/>\n  );\n};\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation de la Propri\u00e9t\u00e9 Children<\/h3>\n\n\n\n<p>Pour ma\u00eetriser davantage la propri\u00e9t\u00e9 <code>children<\/code> en React, voici quelques exemples avanc\u00e9s :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation de Composants Wrapper<\/h4>\n\n\n\n<p>Les composants wrapper peuvent \u00eatre utilis\u00e9s pour envelopper des composants enfants avec des styles ou des fonctionnalit\u00e9s suppl\u00e9mentaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const Wrapper = ({ children }) => (\n  <div className=\"wrapper\">\n    {children}\n  <\/div>\n);\n\nconst App = () => (\n  <Wrapper>\n    <h1>En-t\u00eate<\/h1>\n    <p>Contenu principal<\/p>\n  <\/Wrapper>\n);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Fragments et It\u00e9ration d&rsquo;Enfants<\/h4>\n\n\n\n<p>Utilisation de fragments React et d&rsquo;it\u00e9rations pour produire une liste dynamique de composants enfants :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const List = ({ items }) => (\n  <ul>\n    {items.map((item, index) => (\n      <React.Fragment key={index}>\n        <li>{item}<\/li>\n      <\/React.Fragment>\n    ))}\n  <\/ul>\n);\n\nconst App = () => {\n  const items = ['Item 1', 'Item 2', 'Item 3'];\n  return <List items={items} \/>;\n};\n<\/code><\/pre>\n\n\n\n<p>Pour des ressources compl\u00e9mentaires, vous pouvez consulter les articles sur <a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html\" target=\"_blank\" rel=\"noopener\">React Components and Props<\/a> sur le site officiel de React. Pour apprendre comment manipuler les enfants de mani\u00e8re plus avanc\u00e9e, jetez un coup d&rsquo;\u0153il \u00e0 <a href=\"https:\/\/reactjs.org\/docs\/react-api.html#reactchildren\" target=\"_blank\" rel=\"noopener\">React.Children<\/a> dans la documentation. En outre, si vous souhaitez en savoir plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\">l&rsquo;utilisation des classes en JavaScript avec React<\/a>, cet article pourrait \u00eatre utile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La <strong>Propri\u00e9t\u00e9 Children en React<\/strong> est un outil pr\u00e9cieux pour cr\u00e9er des composants flexibles et r\u00e9utilisables. En comprenant et en ma\u00eetrisant cette propri\u00e9t\u00e9, vous pouvez construire des interfaces utilisateur robustes et dynamiques. Continuez \u00e0 explorer et \u00e0 pratiquer pour d\u00e9couvrir toutes les possibilit\u00e9s offertes par la propri\u00e9t\u00e9 <code>children<\/code> en React. Pour plus de tutoriels sur React, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">la cr\u00e9ation de sites interactifs avec React et Redux<\/a>.<\/p>\n\n\n\n<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-react-reduction.gif\" loading=\"lazy\" alt=\"Learnify Formation React R\u00e9duction\" title=\"\"><\/a>\n\n\n\n<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 Redux et React Offe 50\" title=\"\"><\/a>\n\n\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\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Children Propri\u00e9t\u00e9 React est une fonctionnalit\u00e9 puissante qui vous permet de composer des composants. Comprendre comment utiliser la Propri\u00e9t\u00e9 Children en React vous permet&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3252,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5922","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\/5922","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=5922"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5922\/revisions"}],"predecessor-version":[{"id":5923,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5922\/revisions\/5923"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3252"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}