react中父组件如何直接获取子组件数据_react父组件获取子组件数据-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50805397/article/details/122337028

这篇博客探讨了在React中，如何通过ref和props进行父子组件间的通信，以及使用Hooks实现状态管理。方法1利用ref直接访问子组件属性和方法，方法2通过传递回调函数给子组件实现通信。此外，还展示了如何使用useState Hook在函数组件中管理状态，并通过props传递状态更新函数到子组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类组件通过 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>
    )
}