react组件传递参数

基本传参props

传递数据

<Child age={this.state.age}></Child>

在子组件中

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)}></h3>

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. 使用上下文数据

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

• 3. 使用上下文方法

<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. 父组件

• 1. 导入

import {Provider} from './context'

• 2. 用provider包裹子元素 并传递value数据

<Provider value={{num:this.state.num, setNum:this.setNum}}> 

3. 子组件中

• 1. 导入

import { Consumer} from './context'
// 导入消费者组件

• 2. 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}></Provider>

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

6.编写store

• 1. redux导入
• 2. reducer 初始数据方法
• 3. actions 处理数据动作
• 4. 导出仓库

7.在组件中使用

• 1.导入连接

• 2.导出组件

export default connect(mapStateToProps,mapDisPatchToProps)(Detail)

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