Question

我的render函数中有一个react-chartjs-2元素，我从React.createRef（）中指定了一个ref，但是

refs为空

我的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>
      );
    }
  }

Answer 1

来自React docs：

在a上使用ref属性时自定义类组件，ref对象接收已安装的实例该组件作为其当前。

因此，您将不会收到canvas，但会安装的组件实例。这就是为什么我认为当App componentDidMount被调用时LineChart尚未挂载，这就是为什么current仍然为空。

再次

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

将无效，因为您将收到组件的实例，而不是canvas。

refs in reactjs组件为空

1 个答案: