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

最新推荐文章于 2024-08-08 11:15:06 发布

原创最新推荐文章于 2024-08-08 11:15:06 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

112 篇文章

订阅专栏

es6

29 篇文章

订阅专栏

react

25 篇文章

订阅专栏

本文深入探讨React中父子组件的数据传递及方法调用机制，通过具体代码实例展示如何利用props和回调函数实现组件间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 (
            <div>
                Home页面
                {
                    this.state.list.map((item,index) => {
                        return <List key={index} data={this.state.data} handleClick={() => {this.handleClick(item)}} />
                    })
                }
            </div>
        )
    }
}
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 (
            <div>
                list组件
                {this.props.data}
                <div onClick={() => {this.props.handleClick('子组件')}}>点我</div>
            </div>
        )
    }

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

加油！！！