React 组件间通信-props的用法

几乎每个流行的框架都会有组件的概念。组件可以看成是一个一个的页面，也可以看成实现某个特定功能的模块。像React、Vue框架，会经常用到组件的概念。看下面一个例子：
基本与上篇博客功能差不多。

首先来看效果图：

点击数字框，数值翻倍并且底部的文字改变。这里我们采用组件的方式来做。
整个文件结构如下：

其中，app.js是入口模块。代码如下：

import React, { Component } from 'react';
import Count from './components/Count.js';  //引入组件Count
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1,
      name: 'Liu'
    }
  }
  //实际上点击组件Count中的Div组件，触发的是父组件中的该函数。可从后面代码中看出。
  handleClick = () => {
    let count = this.state.count;
    count = count * 2;
    this.setState({
      count: count,
      name:'Yang'
    })
    console.log(this.state.count);
  }

  render() {
    const data = this.state.count;
    const name = this.state.name;
    return (
      <div>  //组件Count传入参数data 和onClick事件；
        <Count data={data} onClick={this.handleClick} />
        <div>{name}</div>
      </div>
    )
  }
}
export default App;

在组件Count中，主要是显示数值。看下代码：

import React, { Component } from 'react';

class Count extends Component {
  constructor(props) {
    super(props);
  }
  clickFunc = () => {
    console.log(this.props);   //props就是父组件传来的参数。
    this.props.onClick();      //调父组件的onClick事件，相当于通知父组件去进行相应处理。
  }

  render() {
    const data = this.props.data;
    return (   //这部分就是JSX语法，将HTML引入到JS中
      <div className="box" onClick={this.clickFunc}>
        {data}
      </div>
    )

  }
}
export default Count;

这就是this.props来实现组件间通信的方法。例子比较简单，但是对于任何复杂的情况都是适用的。