父组件向子组件传值
这里只介绍最实用的，最快速的上手方法。就是使用组件属性的形式父组件给子组件传值。比如：我们在<sunshineItem>组件中加入content属性，然后给属性传递{item}，这样就完成了父组件向子组件传值。
1
| <sunshineItem content={item}/>
|
现在值已经顺利的传递了过去，这时候可以通过this.props.xxx的形式进行接受，比如传递过来的值，可以用如下代码进行接收。
1
2
3
4
5
6
7
8
9
10
11
| import React, { Component } from 'react';
class sunshineItem extends Component {
render() {
return (
<div>{this.props.content}</div>
);
}
}
export default sunshineItem;
|
子组件向父组件传递数据
现在要作这样一个功能：点击组件中的菜单项后，删除改菜单项。在前边的课程中已经学习了这个知识，知识现在组件拆分了，就涉及了一个字组件向父组件传递数据的知识需要掌握。
先来绑定点击事件，这时候当然是要在组件中绑定了，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import React, { Component } from 'react';
class sunshineItem extends Component {
render() {
return (
<div onClick={this.handleClick}>{this.props.content}</div>
);
}
handleClick(){
console.log('点击....')
}
}
export default sunshineItem;
|
React有明确规定，子组件时不能操作父组件里的数据的，所以需要借助一个父组件的方法，来修改父组件的内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <ul>
{
this.state.list.map((item,index)=>{
return (
<sunshineItem
key={index+item}
content={item}
index={index}
deleteItem={this.deleteItem.bind(this)}
/>
)
})
}
</ul>
|
子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import React, { Component } from 'react';
class sunshineItem extends Component {
constructor(props){
super(props)
this.handleClick=this.handleClick.bind(this)
}
render() {
return (
<div onClick={this.handleClick}>{this.props.content}</div>
);
}
handleClick(){
console.log('点击....',this.props.index)
this.props.deleteItem(this.props.index)
}
}
export default sunshineItem;
|