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

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

父子组件通讯

通讯手段

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

通讯内容

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

以Header 组件为例

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.renderLeftComponent();
}

if (this.props.showBack) {
  let backFunc = this.props.onBack || this.goBack;
  leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"&gt;</i></a>);
}
return leftDOM;

}

renderRightComponent() {
if (this.props.renderRightComponent) {
return this.props.renderRightComponent();
}
}

goBack() {
alert("返回上一页")
}

render() {
return (
<header className="header-bar">
{this.renderLeftComponent()}
{this.props.title || '滴滴'}
{this.renderRightComponent()}

); } }

export default Header;

//父亲组件部分代码App.jsx
import HeaderBar from "./components/Header";

let leftIcon = function () {
return (
<i className="icon left-icon icon-left-haha">左边按钮
)
}
class App extends Component {

render() {
return (
<div className="App">

); } }