Не работает Forward Ref?

Question

[Денис]

Добрый вечер. Помогите, пожалуйста , разобраться почему при прокидывании ref через HOC, используя forwardRef, я получаю null, при выводе в консоль this.documentRef

@connect(
    state => ({
        // code...
    }),
    {
        requestDocuments: someRequests
    }
)

export class MyComponent extends React.Component  {
// Code...

render() {
        return (
                <Grid ref={this.props.forwardRef} />
        );
    }
}

High Order Component:

import React, {forwardRef} from 'react';
import {MyComponent } from './container';

export const MyComponentHOC = React.forwardRef((props, ref) => (
    <MyComponent {...props} forwardRef={ref} />
));

OutSide Call:

import {MyComponentHOC} from './';

class StatefullMyComponentHOC extends React.Component {
    state = {};

    handleClick = (event) => {
        console.log(this.documentRef);
    };

    documentRef = createRef();
 
    render() {
        return (
            <Fragment>
                <StatefullMyComponentHOC ref={this.documentRef}  />
                <button id="4" onClick={this.handleClick}>Обновить контейнер</button>
            </Fragment>
        );
    }
}

Answer 1

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

Либо перепишите Grid на forwardRef по аналогии с примером:

const Grid = React.forwardRef((props, ref) => (
  <div ref={ref}>{props.children}</div>
));

Либо исправьте:

export class MyComponent extends React.Component {
  render() {
    return (
      <Grid innerRef={this.props.forwardRef} />
    );
  }
}

и в компоненте Grid:

const Grid = props => (
  <div ref={props.innerRef}>{props.children}</div>
);

Comments

[Денис]

Но уже в High Order Component ref = null

[Денис]

Антон Спирин Может ли такое происходить из - за того что OutSide Call тоже связан со Стором?

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

Денис, что-то вы где-то недосмотрели.
Посмотрите этот пример.

[Денис]

Антон Спирин, Антон, еще вопросик: чисто теоретически, если бы и компонент App в твоем примере был связан со Store, то и его в таком случаем надо было бы обернуть в React.forwardRef как в случае с MyComponentConnected?

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

Денис, нет. React.forwardRef нужен только для передачи свойства ref через компонент. Так как оно не передается с объектом props. Если попробуете использовать props.ref, то получите такую ошибку:

`ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

Для вашей задачи вообще можно не использовать React.forwardRef. Пример.

С помощью React.forwardRef мы просто меняем интерфейс с:
<Grid innerRef={this.grid} />

реализация

const Grid = (props) => (
  <div ref={props.innerRef}>{props.children}</div>
);

на:
<Grid ref={this.grid} />

реализация

const Grid = React.forwardRef((props, ref) => (
  <div ref={ref}>{props.children}</div>
));

Вот и вся разница.