无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 产业新闻 >

东莞微信小程序制作_react开发教程之React 组件之间的通信方式

时间:2021-01-11 15:23来源:东莞微信小程序制作 作者:jianzhan 点击:
react开发设计实例教程之React 部件中间的通讯方法 文章投稿:zx 这几天学习培训了React觉得部件通讯这一地区专业知识点挺多的,并且太重要,因此,今日加上一点小手记。父子俩
react开发教程之React 组件之间的通信方式     投稿:zx   本篇文章主要介绍了react开发教程之React组件通信详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这两天学习了React感觉组件通信这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

父子组件通讯

通讯手段

这是最常见的通信方式,父组件只需要将子组件需要的pro凡科抠图传给子组件,子组件直接通过this.pro凡科抠图来使用。

通讯内容

更多要提的是如何合理的设置子组件的pro凡科抠图,要想将子组件设计成一个复用性强的通用组件,需要将能够复用的部分抽象出来,抽象出来的pro凡科抠图有两种形成,一种是简单的变量,另一种是抽象出来处理某种逻辑函数。

以Header 组件为例

//HeaderBar.jsx 子组件
import React, { Component } from 'react';
class Header extends Component {
 constructor() {
 super();
 this.handleClick = (e) = {
 console.log(this)
 renderLeftComponent() {
 let leftDOM = {};
 if (this.pro凡科抠图.renderLeftComponent) {
 return this.pro凡科抠图.renderLeftComponent();
 if (this.pro凡科抠图.showBack) {
 let backFunc = this.pro凡科抠图.onBack || this.goBack;
 leftDOM = ( a backFunc.bind(this)} i className="icon left-icon icon-left-arrow" /i /a 
 return leftDOM;

父-子组件通信的手段是通过子组件的pro凡科抠图是子组件用父组件的东西,子-父组件通信,是父组件用子组件的东西,暂时了解的两种方法

利用回调函数

父组件通过pro凡科抠图传递一个方法给子组件,子组件通过pro凡科抠图方法将子组件数据传递给父组件

利用ref

父组件通过refs调用子组件的属性

跨级组件通信

在React中当一个属性反复使用并且存在与好几个子组件中的时候,这个时候我们如果通过pro凡科抠图一级一级传递的话可以实现多层级访问,但是这样出现一个问题就是会使代码非常混乱,在React中国年,我们还可以使用 context 来实现跨级父子组件间的通信;

在react中context称为虫洞

// Component 父级
class parentComponent extends React.Component {
 // add the following property
 static childContextTypes = {
 color: React.PropTypes.string
 // 添加下面方法
 getChildContext() {
 return {
 color: "#f00"
 render() {
 div 
 Child1 / 
 /div 

同级组件之间的通信还是需要通过父组件作为中介,利用多次父-子组件通信,项目中将需要传递的数据放在了父组件的state中,变动时可以自动的同步传递。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866