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中的方法