Блог

Я хочу , чтобы ref мой child function component в моем parent function component , чтобы родитель мог напрямую вызывать дочерний метод. он хорошо работает с компонентом класса, но почему-то не работает в компоненте функции.

это то, что у меня есть:

 //child function component
import React from 'react';

function Testt(props, ref){
    return(
         <div>this is test</div>
    )
}

const ChildRef = React.forwardRef(Testt)

export default ChildRef

///parent function component
import React from 'react';
import ChildRef from './test'
import {useEffect} from 'react';


function App(props){
    const aref = React.useRef()
    function handleClick(e){
        console.log("item click")
        props.parent("hey")
    }
    
    useEffect(()=>{
        console.log(aref)//<-- this always {current:undefined}
    },[aref])

    return(
    <div>
        <ChildRef ref={aref}></ChildRef>
        <div onClick={handleClick}>click</div>
    </div>
    )
}

export default App
 

Я всегда понимаю {current: undefined} , не знаю почему.

Как я могу это решить?

Вы должны передать в ref качестве второго аргумента React.forwardRef

Смотрите документы здесь

Похоже, вы не перешли ref к div элементу Testt компонента.

Попробуйте сделать:

 function Testt(props, ref){
    return(
         <div ref={ref}>this is test</div>
    )
}

const ChildRef = React.forwardRef(Testt,ref)

export default ChildRef
 

Кроме того, для вызова дочернего метода из родительского компонента используйте useImperativeHandle().