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.setAge(15)}>
2.上下文传递参数 context
1.引入的context数据 时 实时更新 当一个数据发生改变所有引用数据的视图发生改变
父组件
1导入类型检测 import {Provider} from './context'
2.定义导出的数据类型
static contextTypes = {
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 Consumer
1定义上下文组件
import React 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.Coumsumer中的context获取数据
<Consumer>
{
context=>(
<div>
<h3>
<button onClick={()=>context.setNum(context.num+1)}>{context.num}</button></h3>
</div>
)
}
</Consumer>
全局数据状态共享 redux react-redux
1.安装 npm i redux react-redux
2.从react-redux导入Provider
import {Provider} from 'react-redux'
3把根组件替换为
<Provider>
<App/>
</Provider>
4.4在Provider添加数据仓库
<Provider store={store}>
5.编写store仓库并导入仓库
6.编写stort
- .redux导入
- reducer初始化数据方法
- reducer初始化数据方法
- 导出仓库
7.在组件中使用
- 导入连接
- 2 导出组件
export default connect(mapStateToProps,mapDisPatchToProps)
(detail)
mapStateToProps 把state数据映射为组件的props
mapDisPatchToProps 把state方法映射为组件的props