React组件传参

1.基础传参

//父组件
//1.传递数据
<Child age={this.state.age}></Child>
//2.传递方法
setAge =v=>this.seState({age:v)}
<Child age = {this.state.age} setAge{this.setAge.bind(this)}></Child>

//子组件
//1.this.props.age 获取数据
//2.<h3 onClick={()=>this.props.setAge(18)}></h3>

2.context上下文传递参数
特点：引入的context数据是实时更新的，当一个数据发生改变，所有引用的视图都会自动更新。

//父组件
//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.使用上下文数据
<p style ={{color:this.context.color}}>Son组件</p>

使用上下文方法
 <button onClick={()=>this.context.setColor('green')}>绿色</button>

3.provider Comsumer上下文方式传递

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

//父组件
//1.导入provider
import {Provider} from './Context'
//2.用Provider包裹子元素并传递数据
<Provider value={{
                num:this.state.num,
                setNum:this.setNum
                }}> 
                 {/*向子孙元素传递value数据  */}
            <h1 onClick={()=>this.setState({num:this.state.num-2})}>组件传参 {this.state.num}</h1>
                <p>context Provider Consumer 上下问，提供者，消费者</p>
                <Child></Child>
            </Provider>

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

4.redux react-redux(全局状态数据共享)
1.安装

npm i redux react-redux

2.导入

import {Provider} from 'react-redux

3.替换根组件

<Provider>
<App/>
</Provider>

4.在Provider中添加数据仓库

<Provider store={store}>

5.编写store

//数据仓库
import {createStore} from 'redux'
//导入创建仓库的方法从 redux里面

//编写动作和方法
//处理动作的方法
const initialState = {count:0,location:[{path:"/",name:'首页'}]}
//初始化数据 count默认值为0，面包屑导航默认为首页
const reducer = (state=initialState,action)=>{
    switch (action.type){
        case 'INCREATE':return {...state,count:state.count+1}
        //当遇到动作是NOREASE 返回一个新的对象，把原来的state结构，
        //加上count属性，值为以前的count值+1
        default: return state;
    }
}
//处理数据的动作
export const actions ={
    //加法，减法，设置面包屑方法
    increate:()=>({type:'INCREATE'})
}

//导出仓库处理方法
export const store = createStore(reducer);

6.组件中使用
1.导入连接
2.导出组件

export default connect(mapStateToProps,mapDisPatchToProps)
{Detail}

mapStateToProps组state数据映射位组件的props
mapDisPatchToProps 把state中的方法映射为props中的方法