React 父子组件之间的数据传递

父组件

import React, {Component} from "react";
import ParentChild from "./component/ParentChild/index"

export default class App extends Component{

    showData = (data) =>{
        console.log(data)
    }

    render() {
        return (
            <div className="App">
            	{/* myFunc：父组件给子组件传递一个function，交由子组件来调用来实现子组件给父组件传递数据 */}
            	{/* data：父组件给子组件传递的数据 */}
                <ParentChild myFunc={this.showData} data="父给子的数据"></ParentChild>
            </div>
        );
    }
}

子组件

import React, {Component} from 'react'
import PropTypes from 'prop-types'

export default class ParentChild extends Component {

    static propTypes = {
        myFunc:PropTypes.func.isRequired
    }

    testClick = (event) => {
        const data = {str: "子给父的数据"}
        // 调用父组件传递的function来给父组件传递数据
        this.props.myFunc(data)
    }

    render() {
    	// 接收父组件传递的数据
        console.log(this.props.data)
        return (
            <div>
                <button onClick={this.testClick}>数据传给父组件</button>
            </div>
        )
    }
}