Можно ли передать элемент ref из дочернего функционального компонента в его родительский функциональный компонент?

Question

Этот пост настолько близок, насколько я мог найти, но я все еще не могу заставить его работать на 2 функциональных компонента. Пожалуйста, дайте мне знать, если я могу ответить на любые дополнительные вопросы или предоставить дополнительную информацию. Большое вам спасибо за ваше время.

Answer 1

В вашей ссылке этот ответ не экспортирует родительский компонент. Может быть, это причина того, что не работает на вашей стороне. Пожалуйста, проверьте приведенный ниже пример с экспортом.

import React, {Component} from 'react';

const Child = ({setRef}) => <input type="text" ref={setRef}/>;

export class Parent extends Component {
    constructor(props) {
        super(props);
        this.setRef = this.setRef.bind(this);
    }

    componentDidMount() {
        // Calling a function on the Child DOM element
        this.childRef.focus();
    }

    setRef(input) {
        this.childRef = input;
    }

    render() {
        return <Child setRef={this.setRef}/>
    }
}