React----函数组件通信（props）

父组件向子组件传数据

父组件

import React from 'react';
import Demo2 from "../demo2";

export default function Demo(props) {

    return (
        <div>
            <Demo2 name="张三" age="20"/>
        </div>
    )
}

子组件

import React from 'react';

export default function Demo2(props) {
    console.log(props)
    const {name,age}=props
    return (
        <div>
            {name}==={age}
        </div>
    );
}

子组件向父组件传数据

子组件

import React from 'react';

export default function Demo2(props) {
    console.log(props)
    const {name,age}=props
    function sendData() {
        props.getData('传给父组件的数据')
    }
    return (
        <div>
            {name}==={age}
            <button onClick={sendData}>向父组件传送数据</button>
        </div>
    );
}

父组件

import React from 'react';
import Demo2 from "../demo2";

export default function Demo(props) {
    function getData(e) {
        console.log('收到子组件传来的数据====',e)
    }
    return (
        <div>
            <Demo2 getData={getData} name="张三" age="20"/>
        </div>
    )
}