Skip to content

React:RefObject

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.

Examples

import * as React from 'react';
import {
  ChargingGraph as _ChargingGraph,
  ChargingGraphOptions as _ChargingGraphOptions,
  ChargingWork,
} from '@steel/charging/dist';

export interface ChargingGraphOptions {
  work?: ChargingWork;
  prevWork?: ChargingWork;
  options?: _ChargingGraphOptions;
}

export default class ChargingGraph extends React.Component<ChargingGraphOptions> {
  _rootDiv: React.RefObject<HTMLDivElement>;
  _graph?: _ChargingGraph;

  constructor(props: ChargingGraphOptions) {
    super(props);
    this._rootDiv = React.createRef<HTMLDivElement>();
  }

  componentDidMount() {
    if (this._graph) {
      return;
    }

    const div = this._rootDiv.current!;
    const options = this.props.options ?? {};
    const work = this.props.work ?? ({} as ChargingWork);
    const prevWork = this.props.prevWork ?? ({} as ChargingWork);
    this._graph = new _ChargingGraph(div, options);
    this._graph.work = work;
    this._graph.prevWork = prevWork;
    this._graph.draw();
  }

  get graph() {
    return this._graph!;
  }

  draw() {
    this.graph.draw();
  }

  render() {
    return <div ref={this._rootDiv}></div>;
  }
}

See also

Favorite site