React:子传父

这篇博客通过一个React示例展示了子组件如何向父组件传递信息。Student组件通过props上的changeFn函数将值传递给父组件Person,实现了状态的更新。文章探讨了React中组件间的通信机制以及状态管理的基本原理。

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

import React, { Component } from 'react'

// 子传父
class Student extends Component {
    render() {
        return (
            <>
            <h1>{this.props.msg}</h1>
            <button onClick={this.changeVal.bind(this)}>按钮</button>
            </>
        )
    }
    changeVal(){
        // 在props上挂一个函数
        this.props.changeFn(666)
    }
}

export default class Person extends Component {
    state = {
        msg : "传家宝"
    }
    render() {
        return (
            <div>
                <Student msg={this.state.msg} changeFn={this.changeFn.bind(this)}></Student>
            </div>
        )
    }
    changeFn(num){
        this.setState({
            msg :num
        })
    }
}

React Hooks 是 React 16.8 版本引入的一个特性,它可以让你在无需编写类组件的情况下使用状态和其他 React 特性。在 React 中,数据是自上而下流动的,也就是父组件可以通过 props 将数据递给组件。但是,如果组件需要将数据递给父组件,就需要使用回调函数来实现。 下面是一个示例,展示了如何在 React Hooks 中实现组件向父组件递数据: ```jsx import React, { useState } from 'react'; function ParentComponent() { const [dataFromChild, setDataFromChild] = useState(''); const handleDataFromChild = (data) => { setDataFromChild(data); }; return ( <div> <ChildComponent sendDataToParent={handleDataFromChild} /> <p>Data from child: {dataFromChild}</p> </div> ); } function ChildComponent({ sendDataToParent }) { const handleClick = () => { const data = 'Hello from child!'; sendDataToParent(data); }; return ( <button onClick={handleClick}>Send data to parent</button> ); } ``` 在上面的例中,ParentComponent 是父组件,ChildComponent 是组件。父组件中有一个状态变量 `dataFromChild`,并通过 `setDataFromChild` 函数来更新它。父组件将 `handleDataFromChild` 函数通过 props 递给组件。 组件中有一个按钮,当点击按钮时,会调用 `handleClick` 函数,并将数据 `'Hello from child!'` 通过 `sendDataToParent` 回调函数递给父组件。 这样,组件就可以将数据递给父组件了。父组件接收到组件递的数据后,可以在界面上展示或做其他处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值