react 通信-子传父

最新推荐文章于 2025-04-09 08:00:00 发布

PiscesGirla

最新推荐文章于 2025-04-09 08:00:00 发布

阅读量439

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_34505202/article/details/128521242

版权

文章展示了在React中，如何通过props将父组件的回调函数传递给子组件，使得子组件在特定操作时能调用这个回调函数，改变父组件的状态。具体例子是子组件(Navbar)通过按钮触发回调，更新父组件(App)中控制Siderbar显示与否的isShow状态。

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

父组件中定义一个回调函数，由子组件来调用执行。用this.props.[父组件自定义回调函数名称]()调用

/*
 * @Author: Spring
 * @LastEditors: Aidam_Bo
 * @LastEditTime: 2023-01-01 21:00:32
 */
import React, { Component } from 'react'
//子传父：父中定义一个回调函数，由子组件来调用执行。用this.props.[父组件自定义回调函数名称]()
//子
class Navbar extends Component{
    render(){
        return <div style={{background:"red"}}>
            <button onClick={()=>{
                console.log('子通知父，让父的isShow取反',this.props.event);
                this.props.event();//调用父组件传过来的回调函数
            }}>切换</button>
            <span>Siderbar</span>
        </div>
    }
}

//子
class Siderbar extends Component{
    render(){
        return <div style={{background:"yellow",width:"200px"}}>
            <ol>
                <li>7</li>
                <li>7</li>
                <li>7</li>
                <li>7</li>
                <li>7</li>
                <li>7</li>
                <li>7</li>
            </ol>
        </div>
    }
}

//父
export default class App extends Component {
    //state只有在父组件App中取得到。子组件中访问不到
    state={
        isShow:true
    }
  render() {
    return (
      <div>
        <Navbar event={()=>{
            console.log("父组件中的自定义事件event不会自己执行");
            this.setState({
                isShow:!this.state.isShow
            })
        }}></Navbar>
        {this.state.isShow && <Siderbar></Siderbar>}
      </div>
    )
  }
}