Props component import et affectation
Bonjour
J'ai une petite incompréhension sur deux points qui sont corolaire dans une partie du code qui explique comment importer un component.
D'abord voici les trois fichier js.
Il y a le layout, qui importe le header qui importe le Title
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
//Layout
import React from "react";
import Footer from "./Footer";
import Header from "./Header";
export default class Layout extends React.Component {
constructor() {
super();
this.state = {
title: "Welcome",
};
}
changeTitle(title) {
this.setState({title});
}
render() {
return (
<div>
<Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />
<Footer />
</div>
);
}
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//Header
import React from "react";
import Title from "./Header/Title";
export default class Header extends React.Component {
handleChange(e) {
const title = e.target.value;
this.props.changeTitle(title);
}
render() {
return (
<div>
<Title title={this.props.title} />
<input value={this.props.title} onChange={this.handleChange.bind(this)} />
</div>
);
}
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
|
//Title
import React from "react";
export default class Title extends React.Component {
render() {
return (
<h1>{this.props.title}</h1>
);
}
} |
- Ma 1ere question est au niveau du fichier header. Le event envoie ça valeur dans la const title.
Code:
1
2
3
4
5
6
|
handleChange(e) {
const title = e.target.value;
this.props.changeTitle(title);
} |
this.props.changeTitle(title); veut dire, que la props changeTitle reçoit, a ou possède la valeur de la const title. On peut aussi donc l'écrire comme ceci :
Code:
1
2
3
4
5
|
handleChange(e) {
const title = e.target.value;
this.props.changeTitle.title={titlle};
} |
c'est le premier point où mon cerveau bug un peut pour comprendre comment le changeTitle possède le (title).
- Le second point est toujours sur le changeTitle mais quand il passe dans autre fichier.
De base quand je vois ceci :
Code:
1
2
3
|
// fichier layout.js
<Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} /> |
Je comprends le changeTitle du fichier Header est égale, prend la valeur du changeTitle du fichier dans lequel il est. Mais pas l'inverse. Dans ce tutorial on démontre, si le changeTitle du fichier header change, il envoie la valeur dans le changeTitle du layout qui va modifier le :
Code:
1
2
|
this.setState({title}); |
Je n'ai pas compris pourquoi l'égalité entre les changeTitle, c est celui qui est importé qui affecte le résident du fichier js. Et surtout comment la valeur du title de
Code:
1
2
|
{this.changeTitle.bind(this)} |
a été modifié par celle là :
Code:
1
2
3
4
5
6
|
<Header changeTitle/>
//qui est dans le fichier layout
this.props.changeTitle(title); |
Merci pour l'aide :D
