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