react组件传递参数

基本传参props
子组件

传递数据<child age={this.state.age}>
获取数据this.props.age
传方法 setAage = v =>this.setState({age:v})
<child age={this.state.age} setAge={this.setAge.bind(this)}>

在子组件使用<h3 onClick={()=>this.props.setAge(15)}>
父组件

1. 导入类型检测

import PropTypes  from 'prop-types';

2. 定义导出的数据类型

static childContextTypes = {
    color:PropTypes.string, // 字符串类型
    setColor:PropTypes.func,// 方法类型
}

3. 获取需要传参的数据

getChildContext(){
    return {
        color:this.state.color,
        setColor:v=>this.setState({color:v})}
}

子孙组件

1. 定义上下文数据类型

static contextTypes = {
    color:PropTypes.string, // 字符串类型
    setColor:PropTypes.func,// 方法类型
}

2. 使用上下文数据

 <h3 style={{color:this.context.color}}>Child组件</h3>

使用上下文方法

<button onClick={()=>this.context.setColor('gold')}>
context provider Comsumer 上下文方式传递

1. 定义 上下文组件

import React from 'react'
let { Consumer, Provider } = React.createContext();

// 创建一个上下文 结构 Consumer 消费者, Provider 供应商

export { Consumer, Provider }

// 导出

2. 父组件

导入

import {Provider} from './context'
用provider包裹子元素 并传递value数据
<Provider value={{
                num:this.state.num,
                setNum:this.setNum
                }}> 

3. 子组件中

导入

import { Consumer} from './context'

// 导入消费者组件

Comsumer中的context 获取数据
 <Consumer>
               { context=>( <div> <h3> <button onClick={()=>context.setNum(context.num+1)}>{context.num}</button></h3> </div> ) } 
</Consumer>
redux react-redux全局数据状态共享(vuex就是有参考redux的)

1 安装

npm i redux react-redux

2. 从 react-redux导入Provider

import {Provider} from 'react-redux';

3. 把根组件替换为

<Provider>
     <App/>
</Provider>

4. 在Provider中添加数据仓库

<Provider store={store}>

5. 编写store仓库并导入仓库

6.编写store

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

7.在组件中使用

导入连接
导出组件

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