React（函数组件）父组件和子组件之间的传值

现有两个组件一个叫做Father，作为父组件，一个叫做Son，作为子组件

一、父组件向子组件传值

Father组件

function Father (props,ref){
	const [page, setPage] = useState("首页");//将page传给子组件
    function changePage() {
        setPage('改变了的首页');
    }
	return (
 		<div className="Home">
            {page}
            <button onClick={changePage}>改变page值</button>
            <Son page={page}  />
        </div>
	)
}

export default Father

子组件中，从props中获得参数，props.page就是父亲传过来的参数page

//Son
function Son(props, ref) {
    return (
        <div id="footerBox">
            {props.page}底部
        </div>
    )
}
export default Son

这里的props.page也是响应式的，当父组件中的page发生变化时，子组件中的props.page也会自动变化。

但是子组件中如果使用const [sonPage,setSonPage] = useState(props.page);
接收参数，则子组件中的page将失去响应效果（即父组件中的page发生变化时，子组件中的sonPage不会变）

二、子组件向父组件传值

在父组件中需要使用一个函数来当做 桥梁 获取子组件的值
Father组件

function Father (props,ref){
	const [value, setValue] = useState();
    function getValueFromSon(param) {
        setValue(param)//这个执行的是父亲的setValue，param是参数，在儿子中执行的时候，将儿子的某个值作为参数来执行。
    }

    function printvalue() {
        console.log(value)
    }
	return (
 		<div className="Home">
            <button onClick={printvalue}>打印value</button>//传值结束后，点击打印父亲的value，就可看到父亲这里是否有接收到子组件传来的值
            <Son  sendValueToFather={getValueFromSon.bind(this)} />
             { /*getValueFromSon.bind(this)  将父亲的这个方法作为一个参数传给儿子，并绑定父亲自己的this*/}
        </div>
	)
}
export default Father

子组件中，我们现在需要将sonValue值传给父组件的value。

点击按钮子组件中的按钮就执行sendValue方法，执行props中的函数sendValueToFather
并将子组件中的sonValue属性值作为参数

function Son(props, ref) {
    const [sonValue, setValue] = useState(123);
    function sendValue() {//点击传值按钮时，执行这个方法
        props.sendValueToFather(sonValue);
    }
    
    return (
        <div id="footerBox">
            <button onClick={sendValue}>传值value</button>
            {/*点击这个按钮，才开始传值*/}
        </div>
    )
}
export default Son

传值之前，打印父组件的value为undefined
传值后，在父组件中打印父组件的value，就会得到123

总之儿子向父亲传值就是，父亲传一个函数给儿子，在儿子那里执行这个函数，导致父亲的某个值有了新的变化

在子组件向父组件传值的时候，子组件可以调用父组件的方法，name父组件如何调用子组件的方法呢？

三、父亲调用儿子的函数

在子组件中，使用useImperativeHandle函数，将子组件
中的方法暴露出去，并使用forwardRef包裹导出的组件

useImperativeHandle函数有两个参数，第一个参数ref即是函数组件自带的参数（props,ref）中的ref。

第二个参数是一个函数，函数返回的对象就是父组件中的headerRef.current

需要暴露方法的组件，在导出的时候，一定要加上forwardRef进行包裹
export default forwardRef(Son)

import React, { useState, forwardRef, useImperativeHandle } from "react"

function Son(props, ref) {
    const [a, setA] = useState(1);
    const [b, setB] = useState(2);
    function sonFunc() {
        console.log("我是儿子中的方法")
    }
    useImperativeHandle(ref, () => {
        return {
            sonFunc,
            setA,
            a: a,
            b
        }
    });

    return (
        <div id="headerBox">
            {a}
        </div>
    )
}

export default forwardRef(Son)

在父组件中使用useRef()，并对子组件进行绑定ref。

打印的headerRef中有一个属性叫做current,current就是子组件暴露出来的东西

点击父亲的执行按钮，就可以通过headerRef.current.sonFunc()执行子组件的方法sonFun，也可以执行儿子中的改变state的方法setA，从而通过父组件来改变子组件的状态值

function Father(props, ref) {
    const headerRef = useRef(null);
    function printRef() {
        console.log(headerRef);
    }
    function doSonFunc() {
        headerRef.current.sonFunc();
        headerRef.current.setA(456);//把子组件中的a从1改变为456
    }
    return (
        <div className="Home">
            <Header ref={headerRef} />
            <button onClick={printRef}>打印ref</button>
            <button onClick={doSonFunc}>执行儿子的方法</button>
        </div>
    )
}
export default Father

这个方法不仅是可以用来调用儿子的方法，对于儿子的状态属性，也是传过来的。

四、兄弟之间的传值

兄弟之间的传值无法直接进行，需要通过父亲作为桥梁，儿子1传值给父亲，父亲再把值传给儿子2。

这么传值多少有些麻烦，所以react有Context、或使用redux来管理一些全局变量，使得各个组件更方便的访问这些变量。