一、父组件向子组件传值
父组件向子组件传值直接使用props进行传值，比如下面Root想要传值给Left,父组件Root里面直接引用子组件Left，并且通过组件的属性name传递给子组件，子组件在自己的内部，直接使用this.props.name来获取传递过来的值。
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
30
31
32
33
34
| class Left extends React.Component {
construct(props){
super(props);
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
class Root extends React.Component{
construct(props){
super(props);
}
greeting(msg){
this.setState({
msg
});
}
render(){
return (
<div>
<Left msg="I came From Left " />
</div>
)
}
}
ReactDOM.render(
<Root />,
document.getElementById('root')
);
|
代码演示地址：https://codepen.io/javaor/pen/dqzRvQ
二、子组件向父组件传值
子组件向父组件与父组件给子组件传值类似，假如组件Right要传值给Root,
Root将传递一个函数greeting给子组件Right，子组件Right调用该函数，将想要传递的信息，作为参数，传递到父组件的作用域中。
函数将保障子组件Right在调用 greeting函数时，其内部 this 仍指向父组件。
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
30
31
32
33
34
35
36
37
|
class Right extends React.Component {
componentDidMount() {
this.props.greeting('Hello From Right')
}
render() {
return <h1>I'm right</h1>;
}
}
class Root extends React.Component{
state = {
msg: ''
};
greeting(msg){
this.setState({
msg
});
}
render(){
return (
<div>
<p>Msg From Right: {this.state.msg}</p>
<Right greeting={msg => this.greeting(msg)} />
</div>
)
}
}
ReactDOM.render(
<Root />,
document.getElementById('root')
);
|
代码演示地址：https://codepen.io/javaor/pen/WgEOdG?editors=1011
###三、兄弟节点之间的传值
假设Right想要向Left传递参数，因为他们之间没有之间关联的节点，只有一个公共的父组件Root，所以只能通过Right先向Root传值，然后在通过props从Root向Left传值。基本第二个基本上一致，代码如下：
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
class Left extends React.Component {
render() {
return <h1>Hello, {this.props.msg}</h1>;
}
}
class Right extends React.Component {
componentDidMount() {
this.props.greeting('Hello From Right')
}
render() {
return <h1>I'm right</h1>;
}
}
class Root extends React.Component{
state = {
msg: ''
};
greeting(msg){
this.setState({
msg
});
}
render(){
return (
<div>
<Right greeting={msg => this.greeting(msg)} />
<Left msg={this.state.msg} />
</div>
)
}
}
ReactDOM.render(
<Root />,
document.getElementById('root')
);
|
