react传参

基本传参 props

在子组件中
this.props.age 获取数据
传参方法

setAge = v=>this.setState({age:v})

在子组件使用

this.props.setAge(15)}>

上下文传递参数 context

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, //  方法类型
}

使用上下文数据

Child组件

使用上下文方法
"this.context.setColor('gold')}>
在Provider中添加数据仓库

编写store

redux导入
reducer 初始数据方法
actions 处理数据动作
导出仓库

在组件中使用
导入连接
导出组件

export default connect(mapStateToProps,mapDisPatchToProps)(Detail)
mapStateToProps 组state数据映射为 组件的props
mapDisPatchToProps 把state中的方法映射porps中的方法