Как передать ref родительскому компоненту?

Question

[Артур Кудашев]

Здравствуйте, читаю в документации про передачу ref из дочернего компонента родительскому с помощью React.forwardRef(), но в примерах используются функции, а мне нужны классы.

Parent.js

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
    render() {
        return (
            <Child />
        )
    }
}

Child.js

import React, { Component } from 'react';

childRef = React.createRef();

export default class Child extends Component {
    render() {
        return (
            <div ref = { this.childRef }></div>
        )
    }
}

Как мне передать ref дочернего элемента родительскому?

Answer 1

[Антон Спирин]

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  childRef = React.createRef();

  render() {
    return (
      <Child innerRef={this.childRef} />
    );
  }
}

import React, { Component } from 'react';

export default class Child extends Component {
  render() {
    const { innerRef } = this.props;

    return (
      <div ref={innerRef}></div>
    );
  }
}

Comments

[Артур Кудашев]

@rockon40, спасибо сработало.