From 56da38540c497e4337ddbb83e9c30029a18862ae Mon Sep 17 00:00:00 2001 From: Jean-Christophe <> Date: Wed, 10 Jan 2024 15:02:55 +0100 Subject: [PATCH] =?UTF-8?q?la=20propri=C3=A9t=C3=A9=20children?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + src/components/personListing.jsx | 7 ++++--- src/scripts/main.js | 9 ++++++++- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 798a158..ac41043 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ où `tag` peut prendre comme valeur : * `v3` : utilisation des propriétés voir `/src/components/person.jsx`, `/src/components/personListing.jsx` et son utilisation dans `/src/mains.js` * `v3.1` : utilisation de la syntaxe de pattern matching sur les objets pour destructurer l'objet `props` dans le paramètre du constructeur du composant. +* `v3.2` : la propriété `children` Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx index 97dc8df..8761f39 100644 --- a/src/components/personListing.jsx +++ b/src/components/personListing.jsx @@ -7,10 +7,11 @@ import Person from './person.jsx'; * note, in second use of Person, the use of spread operator "..." on object to alleviate the syntax, possible when object field names correspond to props name */ const PersonListing = - ({ persons }) => <div> + ({ persons , children }) => <div> Listing : - <Person name={persons[0].name} age={persons[0].age} /> - <Person { ...persons[1]} /> + <Person { ...persons[0] } /> + <Person { ...persons[1] } /> + { children } </div> export default PersonListing; diff --git a/src/scripts/main.js b/src/scripts/main.js index bc4e060..50d1780 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -4,12 +4,19 @@ import { createRoot } from 'react-dom/client'; import personsData from '../data/personsData.js'; // import React component +import Person from '../components/person.jsx' import PersonListing from '../components/personListing.jsx'; const bootstrapReact = () => { const root = createRoot(document.getElementById('insertReactHere')); // parent for created element = "insertion point" - root.render(<PersonListing persons={ personsData } />); // use defined imported component + const component = <PersonListing persons={personsData}> + <h3>This node and followings are children and then correspond to <code>props.children</code></h3> + <Person name="Someone Else" age={42} /> + <Person name="New One" age={1} /> + </PersonListing>; + + root.render(component); } -- GitLab