基本传参 props
<child age={this.state.age}>
在子组件中
this.props.age 获取数据
传参方法
setAge = v=>this.setState({age:v})
<child age={this.state.age} setAge={this.setAge. bind(this)}>
在子组件使用
<h3 onClick= {()=>this.props.setAge(15)}>
上下文传递参数 context
<h3 onClick= {()=>this.props.setAge(15)}>
所有引用数据的视图都会自动更新
父组件
导入类型检测
import PropTypes from 'prop-types';
定义导出的数据类型
static childContextTypes = {
color:PropTypes.string, // 字符串类型
setColor:PropTypes.func,// 方法类型
}
获取需要传参的数据
getChildContext(){
return{
color:this.state.color,
setColor:v=>this.setState({color:v})}
}
子孙组件
定义上下文数据类型
static contextTypes = {
color:PropTypes.string, // 字符串类型
setColor:PropTypes.func, // 方法类型
}
使用上下文数据
<h3 style={{color:this.context.cor}}>Child组件</h3>
使用上下文方法
"<button onClick={0=>this.context.setColor('gold')}>
在Provider中添加数据仓库
<Provider store={store}>
编写store
redux导入
reducer 初始数据方法
actions 处理数据动作
导出仓库
在组件中使用
导入连接
导出组件
export default connect(mapStateToProps,mapDisPatchToProps)(Detail)
mapStateToProps 组state数据映射为 组件的props
mapDisPatchToProps 把state中的方法映射porps中的方法
