react组件传参方法

1.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)}>

2.上下文传递参数 context
1.引入的context数据 时 实时更新 当一个数据发生改变所有引用数据的视图发生改变
父组件

1导入类型检测 import {Provider} from './context'
2.定义导出的数据类型
 static contextTypes = {
        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 Consumer

1定义上下文组件
import React from 'react'
let { Consumer, Provider } = React.createContext();
// 创建一个上下文  结构 Consumer 消费者, Provider  供应商
export { Consumer, Provider }
// 导出

父组件

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

子组件

1导入
import { Consumer} from './context'
2.Coumsumer中的context获取数据
<Consumer>
               {
                   context=>(
                       <div>
                           <h3>
    <button onClick={()=>context.setNum(context.num+1)}>{context.num}</button></h3>
                       </div>
                   )
               } 
                
            </Consumer>

全局数据状态共享 redux react-redux
1.安装 npm i redux react-redux
2.从react-redux导入Provider

import {Provider} from 'react-redux'

3把根组件替换为 
<Provider>
<App/>
</Provider>

4.4在Provider添加数据仓库

<Provider store={store}>

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

• .redux导入
• reducer初始化数据方法
• reducer初始化数据方法
• 导出仓库

7.在组件中使用

• 导入连接
• 2 导出组件

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