React的组件通信。
父子传值
逻辑类似Vue的父子传值。
父组件
1 | class Father extends Component{ |
子组件
1 | class Son extends Component{ |
子父传值
原理:父组件向子组件传递一个函数
,在子组件通过这个函数传递参数回父组件。
父组件
1 | class Father extends Component { |
子组件
1 | class Son extends Component { |
嵌套传值
父传孙
这里需要用到react的createContext()
,创建一组Provider
、Consumer
为了保证页面间引用的Provider
和Consumer
来自同一个内存(常量),我们需要写一个专用的组件:
context.js
1 | import {createContext} from 'react' |
父组件(Father.js)
1 | import React, { Component } from 'react' |
子组件(Son.js)
子组件形式上只是引用孙子组件作为子元素,并不起到传送数据的作用。
1 | import React, { Component } from 'react' |
孙子组件(GrandSon.js)
孙子组件利用Consumer
获取父组件传来的值
1 | import React, { Component } from 'react' |
这种关系很形象,提供者(Provider)是负责放数据的,而(Consumer)是获取数据的。
并列传值(redux mobx)
- 本文链接: https://anyway521.gitee.io/post/6c80011c.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!