react传参

基本传参 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中的方法