react中父组件如何直接获取子组件数据

类组件通过 ref

方法1：

子组件：

import React, { Component } from 'react'

export default class son extends Component {
    state = {
        count: 0,
        count1: [
            { name: "张良", age: 13, sex: "男" },
            { name: "张小菲", age: 14, sex: "女" }
        ]
    }
    fun() {
        console.log("子组件方法")
    }

    render() {
        return (
            <div>

            </div>
        )
    }
}

父组件：

import React, { Component, lazy, Suspense } from 'react'

import Son from "../../company/son"
export default class home extends Component {
    componentDidMount() {
        console.log(this.refs.demo.state.count1)
        this.refs.demo.fun()
    }

    render() {

        return (
            <div>

                <Son ref="demo"></Son>
            </div>
        )
    }

}

方法2：

子组件：

import React, { Component } from 'react'

export default class son extends Component {

    state = {
        count: 0,
        count1: [
            { name: "张良", age: 13, sex: "男" },
            { name: "张小菲", age: 14, sex: "女" }
        ]
    }
    componentDidMount() {
        this.props.onRef(this);
    }
    fun() {
        console.log("子组件方法")
    }

    render() {
        return (
            <div>

            </div>
        )
    }
}

父组件：

import React, { Component, lazy, Suspense } from 'react'

import Son from "../../company/son"
export default class home extends Component {
    componentDidMount(){
        console.log(this.child)
        this.child.fun()
    }

    render() {

        return (
            <div>

                <Son  onRef={(ref) => { this.child = ref; }}></Son>
            </div>
        )
    }

}

Hooks

父组件：

import React ,{useState}from 'react'
import Son from "../../company/son"
export default function Home() {
    let [father,setFather]  =useState(0);
    return (
        <div>
            父亲:|{father}
            <Son it={e=>setFather(e)}></Son>
        </div>
    )
}

子组件：

import React,{useState,useEffect} from 'react'

export default function Son(props) {
    let [num,setNum] = useState(300);
    useEffect(()=>{
        console.log(props)
        props.it(num)
    },[])
    return (
        <div className="Son">
             <h1>儿子:{num}</h1>
        </div>
    )
}