子傳父:回調(diào)函數(shù) this.props.event() ,父組件接受 event={this.handleEvent}
看如下案例:

示例圖片

點擊按鈕控制左側(cè)菜單的顯示和隱藏

import React, { Component } from 'react'
import  './../01-base/css/01-index.css'
class Navbar extends Component {
    render() {
        return <div style={{ background: "red" }}>
            <button onClick={() => {
                this.props.event()
              }}>click</button>
                <ul className="topNav">
                    <li>Home</li>
                    <li>Home</li>
                    <li>Home</li>
                    <li>Home</li>
                    <li>Home</li>
                </ul>
            </div>
    }
}
class Sidebar extends Component {
    render() {
        return <div  className="leftNav">
                <ul>
                    <li>left</li>
                    <li>left</li>
                    <li>left</li>
                    <li>left</li>
                </ul>
            </div>
    }
}

export default class App extends Component {
    state = {
        IsShow: true,
    }
    handleEvent = () => {
        console.log("父組件定義的event事件")
        this.setState({IsShow: !this.state.IsShow})
    }
  render() {
    return (
        <div>
            <Navbar event={this.handleEvent} />
            {this.state.IsShow && <Sidebar />}
      </div>
    )
  }
}
/**
 * 子傳父:回調(diào)函數(shù) event
 */

下面接著看子組件通過this.props.事件名稱 傳值給父組件，父組件通過this.props.屬性名 傳值給子組件的例子
效果如下：
上面的navbar 和下面的tabbar分別是兩個子組件，實現(xiàn)點擊子組件，選項切換內(nèi)部組件，點擊center同時切換到center組件和高亮選擇下班的tabbar的center選項

示例圖片

父組件

import React, { Component } from 'react'
import './../01-base/css/01-index.css'
import Film from '../01-base/components/Film'
import Cinemas from '../01-base/components/Cinema-2'
import Center from '../01-base/components/Center'
import NavBar from './components/Navbar'
import TabBar from './components/Tabbar'
export default class app extends Component {
    state = {
        list: [
            {
                id: 1,
                text: "電影"
            },
            {
                id: 2,
                text: "影院"
            },
            {
                id: 3,
                text: "我的"
            }
        ],
        current: 0
    }
    which() {
        switch (this.state.current) {
            case 0: return <Film></Film>
            case 1: return <Cinemas></Cinemas>
            case 2: return <Center></Center>
            default: return null
        }
    }
    render() {
        return (
            <div>
                <NavBar myevent={() => {
                    console.log("center")
                    this.setState({
                        current: 2
                    })
                }} />
                {this.which()}
                <TabBar myevent={
                    (index) => {
                        this.setState({
                            current: index
                        })
                    }
                } current={this.state.current} list={this.state.list}></TabBar>
            </div>
        )
    }
}

子組件navbar

import React, { Component } from 'react'
import './../../01-base/css/01-index.css'
export default class Navbar extends Component {
    render() {
        return (
            <div className="navbar" style={{ background: "yellow" }}>
                <button>back</button>
                <span>賣座電影</span>
                <button onClick={() => {
                    this.props.myevent()
                }}>center</button>
            </div>
        )
    }
}

子組件 tabbar

import React, { Component } from 'react'
import './../../01-base/css/01-index.css'
export default class app extends Component {
    render() {
        return (
            <div>
                <ul className="tab">
                    {
                        this.props.list.map((item, index) =>
                            <li key={item.id} onClick={() => this.handleClick(index)} className={this.props.current === index ? 'active' : ''}>{item.text}</li>
                        )
                    }
                </ul>
                <div>
                </div>
            </div>
        )
    }
    handleClick = (index) => {
        this.props.myevent(index)
    }
}

子組件 tabbar的函數(shù)式寫法

const TabBar = (props) => {
    return (
        <div>
            <ul className="tab">
                {
                    props.list.map((item, index) =>
                        <li key={item.id} onClick={() => handleClick(index)} className={props.current === index ? 'active' : ''}>{item.text}</li>
                    )
                }
            </ul>
            <div>
            </div>
        </div>
    )
    function handleClick(index) {
        props.myevent(index)
    }
}
export default TabBar;