003*：React 父子通信

目录

 

正文

1：父子通信

/*
目标：父传子传递属性，子传父-传递回调函数

功能：
1：两个组件一个导航，一个侧边栏
2：点击导航里的按钮控制侧边栏的显示和隐藏
*/

import React, { Component } from 'react'

//  导航组件

class NavBar extends Component {
  render() {
    return (
      <div>
        <button onClick={()=> {
            this.props.clickAction()
        }}>按钮</button>
      </div>
    )
  }
}


class Slider extends Component {
    render() {
      return (
        <div style={{width: "100px", background: "yellow"}}>
            <h1>11111</h1>
            <h1>11111</h1>
            <h1>11111</h1>
            <h1>11111</h1>
            <h1>11111</h1>
            <h1>11111</h1>
            <h1>11111</h1>
            <h1>11111</h1>
            <h1>11111</h1>
            <h1>11111</h1>
        </div>
      )
    }
  }

export default class FatherChildConnectComponent extends Component {

    state = {
        isSliderShow: false
    }

    render() {
        return (
            <div>
                <NavBar clickAction={this.handleNavChildClick}></NavBar>

                {this.state.isSliderShow &&  <Slider></Slider>}
            </div>
        )
    }

    // 父组件给子组件传递一个方法，导航用来控制侧边栏的显示和隐藏
    handleNavChildClick = () => {
        this.setState({
            isSliderShow: !this.state.isSliderShow
        })
    }
}

 

 

引用