react父子组件间的通信和传值-白红宇

react父子组件间的通信和传值

阅读量：3891 次

发布时间：2019-05-23

本文共 1477 字，大约阅读时间需要 4 分钟。

react的组件化开发能极大的提升开发效率，因此理解父子组件间的传值是非常重要的。

直接上代码了

父组件

import React, { Component } from 'react'import List from '../../components/list/list'import {Link,withRouter} from 'react-router-dom'class Home extends Component {    constructor() {        super()        this.state = {            value: 123,            data: '345345345',            list: [1,2,3]        }    }    handleClick(value) {        console.log('父组件的方法',value)    }    render() {        return (            
   
                    Home页面                {                    this.state.list.map((item,index) => {                        return 
    
      {this.handleClick(item)}} />                    })                }            
    
   
        )    }}export default withRouter(Home)

这里有几个点要注意下！！！

1.学习react我是用过和vue进行对比来学习的，vue循环可以直接v-for感觉比较方便，而react要通过map遍历并返回相应的dom。

2.绑定参数的时候直接data={}就可以了。

3.像vue一样子组件也可以触发父组件的方法。react绑定子组件方法要用块级作用域包起来，这会有个问题块级作用域会直接执行{}里面的代码。因此在绑定方法的时候有两种情况一种是方法不用传入参数直接就可以{this.handleClick}（这里的方法不能加括号否则会自动执行）。第二种情况如果函数需要传入参数的话就不能避免给方法加括号了，可以在{() => {this.handleClick(item)}}

子组件

render() {        return (            
   
                    list组件                {this.props.data}                
    
      {this.props.handleClick('子组件')}}>点我
    
            
   
        )    }

react直接可用通过this.props.data接受参数，而vue需要将传入的参数放到props中才能调用。

react中是父组件是直接将事件整个发送给子组件通过onClick={() => {this.props.handleClick('子组件')}直接触发父组件的方法并可以自定义要传入的值。而vue子组件要触发父组件的方法需要发送一个代理父组件在子组件的标签上@这个代理的方法来触发（类似于中间有一层代理）

加油！！！

转载地址：http://talhn.baihongyu.com/

你可能感兴趣的文章