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来实现组件间通信的方法。例子比较简单，但是对于任何复杂的情况都是适用的。