前端学习（2233）：react的子传父数据传递

最新推荐文章于 2024-04-14 09:15:41 发布

前端小歌谣

最新推荐文章于 2024-04-14 09:15:41 发布

阅读量245

点赞数

本文链接：https://blog.csdn.net/weixin_43392489/article/details/108430267

版权

本文详细探讨了React中子组件如何通过props向父组件传递数据，包括使用自定义事件、回调函数以及利用React的Context API，旨在帮助开发者深入理解React的数据流向。

摘要由CSDN通过智能技术生成

import React from 'react';
import ReactDOM from 'react-dom';

import './App.css'
class ParentCom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            childData: null
        }

    }
    render() {
        return ( <
            div >
            <
            h1 > 子元素传递给父级 { this.state.childData } < /h1> <
            ChildCom setChildData = { this.setChildData }
            / > < /
            div >
        )
    }
    setChildData = (data) => {
        this.setState({
            childData: data
        })
    }



}


class ChildCom extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                msg: "geyao"
            }
        }
        render() {
            let sendData = null
            return ( <
                div >
                <
                button onClick = { this.sendData } > 传递helloworld给父元素 < /button>  <
                button onClick = {
                    () => { this.props.setChildData('直接调用') } } > 传递helloworld给父元素 < /button> <
                /
                div >
            )



        }
        sendData = () => {
            console.log(this.state.msg)
            console.log(this.props.setChildData(this.state.msg))
        }
    }
    //console.log("这是渲染函数")
ReactDOM.render( < ParentCom / > , document.querySelector("#root"))

运行结果