1

Допустим есть такой React-компонент, вопрос в том, как передать контекст вызова отсюда:

this.benefitPanel = React.createRef();
this.waveBackground = React.createRef();
this.waveBackgroundWrapper = React.createRef();
this.portfolioPanel = React.createRef();
this.animationBG = React.createRef();

В this.animationElements

Видимо из-за неправильного контекста вызова, если попробовать достать DOM элемент таким образом console.log(this.animationElements[0].ElementNode), мы получим null

class App extends React.Component {

  constructor() {
    super();


    this.benefitPanel = React.createRef();
    this.waveBackground = React.createRef();
    this.waveBackgroundWrapper = React.createRef();
    this.portfolioPanel = React.createRef();
    this.animationBG = React.createRef();


    this.animationElements = [{
        name: 'benefitPanel',
        class: 'benefit-panel',
        ElementNode: this.benefitPanel.current,
      },
      {
        name: 'waveBackground',
        class: 'wave-background__item',
        ElementNode: this.waveBackground.current,
      },
      {
        name: 'waveBackgroundWrapper',
        class: 'wave-background',
        ElementNode: this.waveBackgroundWrapper.current,
      },
      {
        name: 'portfolioPanel',
        class: 'portfolio-panel',
        ElementNode: this.portfolioPanel.current,
        func: function() {
          console.log(this);
        }
      },

    ]







  }
}

4
  • проблема не в контексте, а скорее в неверном использовании React.createRef() и того что она возвращает. Измени пример так, чтобы он демонстрировал описанную проблему
    – Grundy
    19 июл 2019 в 13:44
  • 1
    @Grundy, нет, если я выведу console.log(this.benefitPanel.current) вне объекта this.animationElements например, то мне в консоль выдаст нужный DOM элемент
    – uzi_no_uzi
    19 июл 2019 в 14:51
  • Отредактируй вопрос так, чтобы было видно что, где и когда ты вызываешь.
    – Grundy
    19 июл 2019 в 14:59
  • 1
    И, кстати, твой комментарий подтверждает мое предположение, что ты неверно используешь React.createRef()
    – Grundy
    19 июл 2019 в 15:01

1 ответ 1

1

Как описано в справке значение свойства current становится доступно после render.

Так как, в приведенном коде обращение к current идет в конструкторе - значение свойства в этот момент - null, и именно это значение записывается в массив.

class App extends React.Component {
    constructor() {
      super();
      this.ref = React.createRef();
      console.log(1, this.ref.current);
    }
    componentDidMount() {
      console.log(3, this.ref.current);
    }
    render() {
      console.log(2, this.ref.current);
      return ( <div ref = {
          this.ref
        } > 1 </div>);
      }
    }

    ReactDOM.render( 
      <App /> ,
      document.getElementById('root')
    );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>


Для решения достаточно сохранять в ElementNode не current, а само поле, например:

ElementNode: this.benefitPanel,

Тогда после render можно будет обратиться к current: ElementNode.current

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.