初始化组件
import React,{Component} from 'react'
import {render} from 'react-dom'
/**
* 展示具体内容组件
*/
class Counter extends Component{
render() {
return (
<span>
{0}
</span>
);
}
}
/**
* 按钮组件
*/
class CountBtn extends Component{
render() {
return (
<button>{this.props.children}</button>
);
}
}
/**
* 根组件
*/
class App extends Component{
render() {
return (
<>
<CountBtn type="decrement">-</CountBtn>
<Counter/>
<CountBtn type="increment">+</CountBtn>
</>
);
}
}
render(
<App/>,
document.getElementById("root")
);
跨组件通信
1.引用及解构
//createContext是react提供的一个用于跨组件传值的方法
import React,{Component,createContext} from 'react'
与render同级
// createContext这个方法的结果是一个对象，里面有Provider和Consumer
// Provider用于提供状态
// Consumer用于接收状态
const {
Provider,
Consumer:counterConsumer
}=createContext();
2.新写组件ConterProvider
class CounterProvider extends Component{
/**
* 构造函数
* @param props
*/
constructor(props) {
super(props);
//这里的状态是共享状态,任何CounterProvider的后代组件都可以通过CounterConsumer来接收这个值
this.state={
count:100,//count默认值为100
}
}
render() {
return (
// 属性value是默认属性名称
<Provider value={{
count:this.state.count
}}>
{this.props.children} {/* this.props.children = <App/>*/}
</Provider>
);
}
}
3.src/index.js的render函数
render(
<CounterProvider>
<App/>
</CounterProvider>,
document.getElementById("root")
);
4.将CounterProvider中的state属性进行展示
/**
* 展示具体内容组件
*/
class Counter extends Component {
render() {
/**
* CounterConsumer组件中只能是函数
* 参数value 是Provider的属性value中携带的值
*/
return (
<CounterConsumer>
{
(value) => {
return (
<span>
{value.count}
</span>
)
}
}
</CounterConsumer>
);
}
}
5.在CounterProvider中添加修改state属性的函数并以value的形式向下传递
class CounterProvider extends Component {
/**
* 构造函数
* @param props
*/
constructor(props) {
super(props);
//CounterProvider私有的state
this.state = {
count: 100,//count默认值为100
}
}
// 减法
handleDecrement=()=>{
this.setState({
count:this.state.count-1
})
};
// 加法
handleIncrement=()=>{
this.setState({
count:this.state.count+1
})
};
render() {
return (
// 属性value是默认属性名称
// count handleDecrement handleIncrement 向下传递
<Provider value={{
count: this.state.count,
handleDecrement:this.handleDecrement,
handleIncrement:this.handleIncrement
}}>
{this.props.children} {/* this.props.children = <App/>*/}
</Provider>
);
}
}
6.在按钮点击的时候调用修改函数
/**
* 按钮组件
*/
class CountBtn extends Component {
render() {
return (
<CounterConsumer>
{
(value)=>{
const handleClick=this.props.type==="increment"?value.handleIncrement:value.handleDecrement
return (
<button onClick={handleClick}>{this.props.children}</button>
)
}
}
</CounterConsumer>
);
}
}
src/index.js源码
//createContext是react提供的一个用于跨组件传值的方法
import React, {Component, createContext} from 'react'
import {render} from 'react-dom'
// createContext这个方法的结果是一个对象，里面有Provider和Consumer
// Provider用于提供状态
// Consumer用于接收状态
const {
Provider,
Consumer: CounterConsumer
} = createContext();
// 封装一个基本的Provider,如果直接使用Provider的话不方便管理状态
class CounterProvider extends Component {
/**
* 构造函数
* @param props
*/
constructor(props) {
super(props);
//这里的状态是共享状态,任何CounterProvider的后代组件都可以通过CounterConsumer来接收这个值
this.state = {
count: 100,//count默认值为100
}
}
// 减法
handleDecrement=()=>{
this.setState({
count:this.state.count-1
})
};
// 加法
handleIncrement=()=>{
this.setState({
count:this.state.count+1
})
};
render() {
return (
// 属性value是默认属性名称
// count handleDecrement handleIncrement 向下传递
<Provider value={{
count: this.state.count,
handleDecrement:this.handleDecrement,
handleIncrement:this.handleIncrement
}}>
{this.props.children} {/* this.props.children = <App/>*/}
</Provider>
);
}
}
/**
* 展示具体内容组件
*/
class Counter extends Component {
render() {
/**
* CounterConsumer组件中只能是函数
* 参数value 是Provider的属性value中携带的值
*/
return (
<CounterConsumer>
{
(value) => {
return (
<span>
{value.count}
</span>
)
}
}
</CounterConsumer>
);
}
}
/**
* 按钮组件
*/
class CountBtn extends Component {
render() {
return (
<CounterConsumer>
{
(value)=>{
const handleClick=this.props.type==="increment"?value.handleIncrement:value.handleDecrement;
return (
<button onClick={handleClick}>{this.props.children}</button>
)
}
}
</CounterConsumer>
);
}
}
/**
* 根组件
*/
class App extends Component {
render() {
return (
<>
<CountBtn type="decrement">-</CountBtn>
<Counter/>
<CountBtn type="increment">+</CountBtn>
</>
);
}
}
render(
<CounterProvider>
<App/>
</CounterProvider>,
document.getElementById("root")
);
流程解释
1.创建createContext
2.根据createContext进行解构
-
createContext这个方法的结果是一个对象，里面有Provider和Consumer -
Provider用于提供状态 -
Consumer用于接收状态
最终解构出两个组件
1.`Provider` #用于提供状态
2.`CounterConsumer` #用于接收状态
3.封装一个基本的Provider组件名称命名为CounterProvider，如果直接使用Provider的话不方便管理状态
在
CounterProvider组件中需要返回一个Provider以及{this.props.children}这个children相当于Vue中的<slot/>组件
4.在index.js的render函数中以CounterProvider组件为父组件App组件为子组件
5.在App组件中再去调用CountBtn和Counter组件
6.在CountBtn组件中使用CounterConsumer进行接收CounterProvider组件传递的value属性的值
7.在Counter组件中使用CounterConsumer进行接收CounterProvider组件传递的value属性的值
context-跨组件完
网友评论