React父子组件传参

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多套了一层。