Почему на продакшене React в ref.current возвращает DOM-элемент, а не объект?

Question

[Кирилл]

Есть некий компонент "A", такого вида:

class ComponentA extends React.Component {

  someMethod = () => {
    console.log('test');
  };

  render() {
    return (
      <div className="component-a" ref={this.props.forwardedRef}>
         ...
      </div>
    );
  }
}

export default React.forwardRef((props, ref) => {
  return <ComponentA {...props} forwardedRef={ref} />;
});

И есть компонент "B", который по ссылке вызывает методы компонента "A":

import ComponentA from "./ComponentA";

class ComponentB extends React.Component {

  constructor(props) {
    this.someRef = React.createRef();
  }

  render() {
    return (
      <div className="component-b">
        <ComponentA  ref={this.someRef} />
        <button onClick={() => this.someRef.current.someMethod()}>Click!</button>
      </div>
    );
  }
}

Тут всё просто. Нажимаем на кнопку, и должен вызваться метод someMethod() компонента "A". Когда я разрабатываю локально, то всё работает, метод someMethod() вызывается. Но когда выливаю на прод, то компонент при нажатии на кнопку начинает выдавать ошибку:
this.someRef.current.someMethod is not a function

Странность в том, что на продакшене в this.someRef.current почему-то появляется DOM-узел (), а не объект. Хотя в моём локальном Dev внутри this.someRef.current находится объект...

Помогите пожалуйста разрабраться, почему так

И из-за того, что в Продакшене DOM-узел, не получается вызвать метод someMethod()

Answer 1

[vıtalıyırtlach]

Так как реф это ссылка DOM элемент и у него есть свойства и методы .
P.S. подробнее почитайте про рефы в документации

Comments

[Кирилл]

Но почему тогда я могу у себя локально вызывать метод someMethod() ? А на проде, после сборки проекта, не могу.

Почему ref себя по-разному ведет?