React学习笔记20-父子通信(子传父)

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-04

20.React学习笔记20-父子通信(子传父)2023-11-08

21.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

在React中子组件给父组件传参通过回调函数来进行。

父组件给子组件传递一个回调函数作为属性。

子组件在需要传递参数的地方调用父组件传递的回调函数即可。

import React, { Component } from 'react'
class Navbar extends Component {
    render() {
        return (
            <div style={{ backgroundColor: 'red' }}>
                <button onClick={
                    () => {
                        this.handlerClick()
                    }
                }>click</button>
                <span>navbar</span>
            </div>
        )
    }
    handlerClick() {
        this.props.event()//调用父组件传来啊的回调函数
    }
}
class Siderbar extends Component {
    render() {
        return (
            <div style={{ backgroundColor: "yellow", width: '200px' }}>
                <ul>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                </ul>
            </div>
        )
    }
}
export default class App extends Component {
    state = {
        isShow: true
    }
    render() {
        return (
            <div>
                <Navbar event={() => {
                    console.log('event事件')
                    this.setState({
                        isShow: !this.state.isShow
                    })
                }}></Navbar>
                {this.state.isShow && <Siderbar></Siderbar>}
            </div>
        )
    }
}
/* 
        父传子：通过属性，
        子传父：通过回调函数
*/