Refs in reactjs Компонент пуст

Phillip Gibb спросил: 28 марта 2018 в 04:48 в: reactjs

У меня есть элемент response-chartjs-2 в моей функции рендеринга, который я присваиваю ref из React.createRef (), но

  1. refs пуст
  2. текущее свойство в моем ref имеет значение null

    import React, { Component } from 'react';
    const LineChart = require('react-chartjs-2').Line;class App extends Component {
      constructor(props) {
        super(props);
        this.chartRef = React.createRef();
        this.chartObject = null;
      }  componentDidMount() {
        this.chartObject = this.chartRef.current.getContext('2d');
        this.chartObject.update();
      }  render() {    return ( 
          <div className = "App">
            <LineChart 
              data = {}
              width = {600}
              height = {250}
              ref = {this.chartRef}/>
            </div>
          );
        }
      }
    

1 ответ

Есть решение
Tomasz Mularczyk ответил: 28 марта 2018 в 05:40

Из документов React:

Когда атрибут ref используется в компоненте класса acustom, объект ref получает подключенный экземпляр компонента в качестве его текущего.

Таким образом, вы не получите canvas, а экземпляр компонента , когда он будет смонтирован. Вот почему я думаю, что когда приложение componentDidMount называется, LineChart еще не было смонтировано, поэтому current по-прежнему равно нулю.

И снова p>

this.chartObject = this.chartRef.current.getContext('2d');

не будет работать, поскольку вы получите экземпляр компонента, а не canvas.