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來實現組件間通信的方法。例子比較簡單，但是對於任何複雜的情況都是適用的。