基本传参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中的方法
