react开发教程之React 组件之间的通信方式

react开发教程之React 组件之间的通信方式

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

父子组件通讯

通讯手段

这是最常见的通信方式，父组件只需要将子组件需要的props传给子组件，子组件直接通过this.props来使用。

通讯内容

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

以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.props.renderLeftComponent) {

return this.props.rendhttp://erLeftComponent();

}

if (this.props.showBack) {

let backFunc = this.props.onBack || this.goBack;

leftDOM = ();

}

return leftDOM;

}

renderRightComponent() {

if (this.props.renderRightComponent) {

return this.props.renderRightComponent();

}

}

goBack() {

alert("返回上一页")

}

render() {

return (

{this.renderLeftComponent()}

{this.props.title || '滴滴'}

{this.renderRightComponent()}

);

}

}

export default Header;

//父亲组件部分代码App.jsx

import HeaderBar from "./components/Header";

let leftIcon = function () {

return (

左边按钮

)

}

class App extends Component {

render() {

return (

);

}

}

子父组件通讯

父-子组件通信的手段是通过子组件的props是子组件用父组件的东西，子-父组件通信，是父组件用子组件的东西，暂时了解的两种方法

利用回调函数

父组件通过props传递一个方法给子组件，子组件通过props方法将子组件数据传递给父组件

利用ref

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

跨级组件通信

在React中当一个属性反复使用并且存在与好几个子组件中的时候，这个时候我们如果通过props一级一级传递的话可以实现多层级访问，但是这样出现一个问题就是会使代码非常混乱，在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>

}

}

// Component Child1

class Child1 extends React.Component {

// 添加下面属性

static contextTypes = {

color: React.PropTypes.string

}

render() {

}

}

同级组件通信

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。