一、props
1.1 代码展示
import React, {Component} from 'react';
import React, {Component} from 'react';
import './style.css';
class Item extends Component {
render () {
return (
<li>{this.props.item}</li>
)
}
}
export default Item;
/**
* Created by jm on 2017/9/22.
*/
import React, {Component} from 'react';
import Item from '../Item';
import fruits from '../fruits';
import './style.css';
class List extends Component {
render () {
return (
<ul className="list">
{
fruits.map((item, index) => {
return (
<Item key={index} item={item}/> // 这里不再是 <li key={index}>{item}</li>
)
})
}
</ul>
)
}
}
export default List;
1.2 数据传递的窍门 - props（重点）
- 从上面这一张图片我们可以清楚知道：
Item组件是List组件的子组件，即：List是Item的父亲。
- 现在我们需要将数据由父亲
List传送到孩子Item，这中间的桥梁就是props。接下来开始分析：
- List/index.js
- 以下截取的部分代码，可以看到
Item组件上有一个item属性，其值就是数据
fruits.map((item, index) => {
return (
<Item key={index} item={item}/>
)
})
- Item/index.js
- 以下截取的部分代码，可以看到
this.props.item，这里保存的就是由父组件List传输过来的数据，作为子组件，Item只需要通过this.props.xxx直接引用就可以了
这样就可以达到父子之间的数据传递了。
return (
<li>{this.props.item}</li>
)
tips：只能是父组件通过this.props向子组件传递数据哟！！！
props只能读取不能修改！！！！
