React context 内置的一套传递数据的方法

周大胖子

context的局限性：
虽然可以实现跨组件通讯，但是通过context 只能实现从上往下传递，不能实现从下往上传递或者同级之间传递

1. 
   
2.    
   
3. import React from "react";
   
4. 
   
5. 
   
6. 
   
7. 
   
8. // 1.创建一个上下文对象
   
9. const AppContext2 = React.createContext({
   
10.     name:'林志玲',
    
11.     age:45
    
12. });
    
13. 
    
14. // 2.从上下文对象中获取容器组件
    
15. // Provider: 生产容器组件
    
16. // Consumer: 消费者容器组件
    
17. // 容器组件：专门用于包裹其他组件的组件
    
18. 
    
19. const { Provider, Consumer } = AppContext2;
    
20. class RightDiv extends React.Component {
    
21.     constructor() {
    
22.         super();
    
23. 
    
24.     }
    
25.     render() {
    
26.         return (
    
27.             <section>
    
28.                 <p>演员2：{this.context.name}</p>
    
29.                 <p>年龄2：{this.context.age}</p>
    
30.             </section>
    
31.         )
    
32.     }
    
33. 
    
34. }
    
35. // 通过静态方法  来消费 数据  如果有多个生产者 不能用这种模式
    
36. RightDiv.contextType = AppContext2;
    
37. 
    
38. class LeftDiv extends React.Component {
    
39.     constructor() {
    
40.         super();
    
41.     }
    
42. 
    
43.     render() {
    
44.         return (
    
45.             <section>
    
46.                 这是父组件
    
47.                 <br />
    
48.                 <RightDiv></RightDiv>
    
49.             </section>
    
50. 
    
51.         )
    
52.     }
    
53. 
    
54. 
    
55. }
    
56. 
    
57. 
    
58. 
    
59. class ContextTemp extends React.Component {
    
60. 
    
61.     constructor() {
    
62.         super();
    
63.     }
    
64. 
    
65.     render() {
    
66.         return (
    
67. 
    
68.             <section>
    
69.                 这是爷爷辈的组件
    
70.                 <LeftDiv></LeftDiv>
    
71.             </section>
    
72.         )
    
73.     }
    
74. 
    
75. 
    
76. }
    
77. 
    
78. export default ContextTemp;
    

复制代码

上面是简写：其实我觉得用的地方不会很多

周大胖子

补充一个组件传递方法的简写，  在 <Consumer> 中，如果有类 且传递数据较多 可以使用 <Home  {...value}> 的写法 </Consumer>