React:Props
| folder | Projet: test_react_project |
Props :permet à une componenet parent d’envoyer des données à une component child
Parent est la component qui import une autre component(child)
Exemple 1
import React from 'react';
// Composant enfant
function Welcome(props) {
return <h1>Bienvenue, {props.name} !</h1>;
}
export default Welcome;import React from 'react';
import Welcome from './Welcome';
// Composant parent
function App() {
return (
<div>
<Welcome name="John" />
<Welcome name="Jane" />
<Welcome name="Alice" />
</div>
);
}
export default App;Exemple 1 avec classe:
import React, { Component } from 'react';
// Composant enfant
class Welcome extends Component {
constructor(props)
{
super(props)
}
render() {
return <h1>Bienvenue, {this.props.name} !</h1>
}
}
export default Welcome;// Composant parent
class App extends Component {
constructor(props)
{
super(props)
}
render() {
return (
<div>
<Welcome name="John" />
<Welcome name="Jane" />
<Welcome name="Alice" />
</div>
);
}
}
export default App;Exemple 2
Exemple 2
import React from 'react';
// Composant enfant
function BookInfo({ title, author, year }) {
return (
<div>
<h2>Titre: {title}</h2>
<p>Auteur: {author}</p>
<p>Année de publication: {year}</p>
</div>
);
}
export default BookInfo;import React from 'react';
import BookInfo from './BookInfo';
// Composant parent
function BookList() {
return (
<div>
<h1>Liste de livres</h1>
<BookInfo
title="Harry Potter"
author="J.K. Rowling"
year="1997"
/>
<BookInfo
title="To test a Mockingbird"
author="Harper Lee"
year="1960"
/>
<BookInfo
title="The Great Gatsby"
author="F. Scott Fitzgerald"
year="1925"
/>
</div>
);
}
export default BookList;Exemple 2:classe
import React, { Component } from 'react';
// Composant enfant
class BookInfo extends Component {
constructor(props)
{
super(props)
}
render() {
return (
<div>
<h2>Titre: {this.props.title}</h2>
<p>Auteur: {this.props.author}</p>
<p>Année de publication: {this.props.year}</p>
</div>
);
}
}
export default BookInfo;import React, { Component } from 'react';
// Composant parent
class BookList extends Component {
constructor(props)
{
super(props)
}
render() {
return (
<div>
<h1>Liste de livres</h1>
<BookInfo title="Harry Potter" author="J.K. Rowling" year="1997" />
<BookInfo title="To test a Mockingbird" author="Harper Lee" year="1960" />
<BookInfo title="The Great Gatsby" author="F. Scott Fitzgerald" year="1925" />
</div>
);
}
}
export default BookList;Exemple 3
Exemple 3
import React from 'react';
// Composant enfant pour afficher les informations d'un livre
function BookInfo({ book }) {
const { title, author, year } = book;
return (
<div>
<h2>Titre: {title}</h2>
<p>Auteur: {author}</p>
<p>Année de publication: {year}</p>
</div>
);
}
export default BookInfo;import React from 'react';
import BookInfo from './BookInfo';
// Composant parent pour afficher une liste de livres
function BookList() {
const books = [
{ title: "Harry Potter", author: "J.K. Rowling", year: "1997" },
{ title: "To test a Mockingbird", author: "Harper Lee", year: "1960" },
{ title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: "1925" }
];
return (
<div>
<h1>Liste de livres</h1>
{books.map((book, index) => (
<BookInfo key={index} book={book} />
))}
</div>
);
}
export default BookList;Exemple 3:classe
import React, { Component } from 'react';
// Composant enfant pour afficher les informations d'un livre
class BookInfo extends Component {
constructor(props)
{
super(props)
}
render() {
const { title, author, year } = this.props.book;
return (
<div>
<h2>Titre: {title}</h2>
<p>Auteur: {author}</p>
<p>Année de publication: {year}</p>
</div>
);
}
}import React, { Component } from 'react';
// Composant parent pour afficher une liste de livres
class BookList extends Component {
constructor(props)
{
super(props)
}
render() {
const books = [
{ title: "Harry Potter", author: "J.K. Rowling", year: "1997" },
{ title: "To test a Mockingbird", author: "Harper Lee", year: "1960" },
{ title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: "1925" }
];
return (
<div>
<h1>Liste de livres</h1>
{books.map((book, index) => (
<BookInfo key={index} book={book} />
)}
</div>
);
}
}
export default BookList;Exemple
Exemple
App.js
import React, { useState } from 'react';
import './App.css';
import ChildComponent1 from './components/childComponent1';
function App() {
const [listeGroupe, setListeGroupe] = useState([
'Groupe1',
'Groupe2',
'Groupe3'
]);
return (
<div>
<ChildComponent1
donnees1="bonjour"
Unclient={{ client: { nom: 'abc', prenom: 'xyz' } }}
listeGroupe={listeGroupe}
/>
</div>
);
}
export default App;childComponent1.js
import React, { useState } from "react";
function ChildComponent1(props) {
const [mesGroupes, setMesGroupes] = useState(props.listeGroupe);
const [monClient, setMonClient] = useState(props.Unclient);
return (
<div>
<table>
<tbody>
<tr>
<td>donnees1 From parent:</td>
<td>{props.donnees1}</td>
</tr>
<tr>
<td>mesGroupes From parent:</td>
<td>
<ol>
{
mesGroupes.map((g, index) => (
<li key={index}>{g}</li>
))
}
</ol>
</td>
</tr>
<tr>
<td>Client From parent</td>
<td>
<ul>
<li>Nom: {monClient.client.nom}</li>
<li>Prénom: {monClient.client.prenom}</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
);
}
export default ChildComponent1;Exemple:classe
App.js
import React from 'react';
import './App.css';
import ChildComponent1 from './components/childComponent1'
class App extends React.Component{
constructor(props)
{
super(props);
this.state={
listeGroupe:['Groupe1','Groupe2','Groupe3']
}
}
render()
{
return (
<div>
<ChildComponent1
donnees1="bonjour"
Unclient={{client:{nom:'abc',prenom:'xyz'}}}
listeGroupe={this.state.listeGroupe}
/>
</div>
);
}
}
export default App;
npx crcf components/childComponent1
childComponent1.js
import React, { Component } from "react";
class ChildComponent1 extends Component {
constructor(props)
{
super(props);
this.state={
mesGroupes:this.props.listeGroupe,
monClient:this.props.Unclient
}
}
render() {
return
<div>
<table>
<tr>
<td>donnees1 From parent:</td>
<td>{this.props.donnee1}</td>
</tr>
<tr>
<td>mesGroupe From parent:</td>
<td>
<ol>
{
this.state.mesGroupes.map((g)=>{
return <li>{g}</li> })
}
</ol>
</td>
</tr>
<tr>
<td>Client From parent</td>
<td><ul>
Nom:{
this.state.monClient.client.nom
}
<br/>
Prnéom:{
this.state.monClient.client.prenom
}
</ul>
</td>
</tr>
</table>
</div>;
}
}
export default ChildComponent1;Exemple 3 :Envoyer les données from Child to Parent
App.js
import React, { useState } from 'react';
import './App.css';
import ChildComponent1 from './components/childComponent1';
function App() {
const [input, setInput] = useState('');
const changeValue = (v) => {
setInput(v);
};
return (
<div>
<p>Valeur From Child: {input}</p>
<ChildComponent1
fonctionParent={changeValue}
/>
</div>
);
}
export default App;ChildComponent1.js
import React from "react";
function ChildComponent1({ fonctionParent }) {
const sendToParent = (e) => {
fonctionParent(e.target.value);
};
return (
<div>
<input
type="text"
onChange={sendToParent}
/>
</div>
);
}
export default ChildComponent1;