React父子组件传参
首先要了解React中定义组件的两种方式：
函数式组件 与 class组件，如有不了解的可以看React之组件介绍及用法详解
接下来实现父子组件传参使用class组件（父子组件传参为一套代码，以下有分析）
//父组件
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
name: "我是父组件的name"
}
}
render() {
return (
<div className="test-list">
<h1>我是父组件</h1>
<Child handleParent={this.handleClick.bind(this)} name={this.state.name} />
</div>
);
}
/**子组件传入父组件的方法 */
handleClick(val) {
console.log(val, 'val')
}
}
//子组件
import React, { Component } from 'react';
class child extends Component {
constructor(props) {
super(props)
this.state = {
message: "我是子组件的message",
color: 'blue'
}
}
render() {
return (
<div>
<h2 onClick={this.handleClick.bind(this)}>我是child子组件{this.state.color} · {this.props.name}</h2>
</div>
);
}
/**子组件传父组件 */
handleClick() {
this.props.handleParent(this.state)
}
}
export default child;
分析：
1.先看看父传子
了解过vue的小伙伴会发现，除了语法上不一样，用法如出一辙，通过v-bind:parent="parent"传入子组件，然后子组件通过props属性取到parent。再回过头看react，在父组件引入的子组件上定义 name={this.state.name}，子组件取值不像vue那么麻烦，先定义属性再取值，而是直接取值this.props.name ，这个this.props后面的name就是父组件中=前面定义的name
2.子传父
在vue中子传父，通过this.$emit 方法实现，this.$emit("方法名",传入的参数)，在父组件中引入的子组件上添加子组件传入的方法名即可，如：<child @方法名="handleClick">。在react中亦是如此，都是传一个方法到子组件。
先在子组件中的方法中定义 this.props.handleParent(传到父组件的值)，然后再父组件中引入的子组件上添加子组件传入的方法，如：
<Child handleParent={this.handleClick.bind(this)} name={this.state.name} />
总结：在不考虑底层的情况下，两个框架的父子组件传参方式都类似，个人认为单从写法上vue依赖自身的属性方法，在react上则是直接定义直接取，相比较之下，vue多套了一层。
