基本传参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)}>
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>
使用上下文方法
<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}>
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中的方法映射诶porps中的方法
