1.基础传参props
- 传数据
<Child age={this.state.age}> - 在子组件中
this.props.age获取数据 - 传方法
setAge=v=>this.setState({age:v})
<Child age = {this.state.age} setAge={this.setAge.bind(this)}> - 在子组件使用
<h3 onClick={()=>this.props.setAget(15)}>
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.使用上下文数据
<h3 style={{color:this.context.color}}>Child组件</h3> - 3.使用上下文方法
<Button onClick={()=>this.context.setColor('gold')}>变金色</Button>
3.上下文方式传递（context provider consumer）
【定义组件】
- 1.定义上下文组件
import React, { Component } from 'react';
let {Consumer,Provider} = React.createContext();
//创建一个上下文结构 consumer消费者 provider供应商
export {Consumer,Provider};
//导出
【父组件】
- 1.导入
import {Provider} from './context' //导入供应商组件 - 2.用provider包裹子元素，并传递value数据
<Provider
value={{num:this.state.num,
setNum:this.setNum}}>
</Provider>
【子组件】
- 1.导入
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.从react-redux导入Provider
import {Provider} from 'react-redux' - 3.把根组件替换为：
<Provuder>
<App/>
</Provuder>
- 4.在Provuder中添加数据仓库
<Provuder store={store}> - 5.编写store仓库，并导入仓库
- 6.编写store
①.redux导入；
②.reducer初始数据方法
③.actions处理数据动作
④.导出仓库 - 7.在组件中使用
①.导入链接
②.导出组件
export default connect(mapStateToProps,mapDisPatchToProps)
★解释：
mapStateToProps把state数据映射为组件的props
mapDisPatchToProps把state中的方法映射给props中的方法
