Skip to content
Snippets Groups Projects
Commit 3608a0db authored by Jean-Christophe's avatar Jean-Christophe
Browse files

props et pattern matching

parent 5fe1dbe9
Branches
Tags v3.1
No related merge requests found
...@@ -32,6 +32,7 @@ où `tag` peut prendre comme valeur : ...@@ -32,6 +32,7 @@ où `tag` peut prendre comme valeur :
voir `/src/components/first.jsx`, `/src/components/second.jsx` et son utilisation dans `/src/mains.js` voir `/src/components/first.jsx`, `/src/components/second.jsx` et son utilisation dans `/src/mains.js`
* `v3` : utilisation des propriétés * `v3` : utilisation des propriétés
voir `/src/components/person.jsx`, `/src/components/personListing.jsx` et son utilisation dans `/src/mains.js` 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.
Faire ```git checkout main``` pour revenir à la version finale. Faire ```git checkout main``` pour revenir à la version finale.
...@@ -8,9 +8,9 @@ import '../style/person.css'; ...@@ -8,9 +8,9 @@ import '../style/person.css';
* reminder : in jsx, code inside {} is javascript interpreted code * reminder : in jsx, code inside {} is javascript interpreted code
*/ */
const Person = const Person =
props => <div className="person">Here is : ( { name, age } ) => <div className="person">Here is :
<div>name : <span>{ props.name }</span> </div> <div>name : <span>{ name }</span> </div>
<div>age : <span>{ props.age }</span> </div> <div>age : <span>{ age }</span> </div>
</div> </div>
export default Person; export default Person;
...@@ -7,10 +7,10 @@ import Person from './person.jsx'; ...@@ -7,10 +7,10 @@ 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 * 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 = const PersonListing =
props => <div> ({ persons }) => <div>
Listing : Listing :
<Person name={props.persons[0].name} age={props.persons[0].age} /> <Person name={persons[0].name} age={persons[0].age} />
<Person {...props.persons[1]} /> <Person { ...persons[1]} />
</div> </div>
export default PersonListing; export default PersonListing;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment