Использование MetricsGraphics.js с ReactJS

Question

Я пытаюсь использовать графическую библиотеку MetricsGraphs.js с React.js. Как и многие графические библиотеки, MetricsGraphics работает, напрямую изменяя DOM. К сожалению, это не очень хорошо с ReactJS. Я испробовал несколько разных стратегий, но мне кажется, что я не могу обойти тот факт, что MetricsGraphs.js нужен прямой доступ к элементу DOM, который он может изменять. Я что-то упустил или нет возможности использовать MetricsGraphics.js с React без серьезных изменений в библиотеке?

Answer 1

Ты можешь использовать ref свойство компонента, чтобы получить доступ к его элементам DOM в React.

Эти ссылки (ссылки) особенно полезны, когда вам необходимо: найти разметку DOM, отображаемую компонентом (например, чтобы позиционировать ее абсолютно), использовать компоненты React в более крупном приложении, не являющемся React, или перевести существующую кодовую базу в React.

Вы можете прочитать больше о refs в документации React refs

Вот пример, который работает в моих проектах сегодня.

import React, { Component } from 'react';

import MG from 'metrics-graphics';
import './node_modules/metrics-graphics/dist/metricsgraphics.css'; // path to the CSS of metricsgraphics

class Graph extends Component {
  componentDidMount() {
    MG.data_graphic({
      title: "Line Chart",
      description: "This is a simple line chart.",
      data: data,
      width: 600,
      height: 200,
      right: 40,
      target: this.target,
      x_accessor: 'date',
      y_accessor: 'value'
    });
  }

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

export default Graph;

пришлось обновить ref быть обратным вызовом вместо строки, чтобы упростить задачу и сохранить ее работоспособность в будущем из-за нескольких примечаний в документации:

Примечание из раздела "Предостережения"

Если вы хотите сохранить отказоустойчивость компилятора Google Closure, убедитесь, что вы никогда не получите доступ к свойству, указанному в виде строки. Это означает, что вы должны получить доступ с помощью this.refs['myRefString'] если ваш реф был определен как ref="myRefString",

Примечание из раздела атрибутов ссылки String

Несмотря на то, что ссылки на строки не являются устаревшими, они считаются устаревшими и, вероятно, будут устаревшими в будущем. Обратные ссылки являются предпочтительными.

Answer 2

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

class Graph extends Component {
  componentDidMount() {

    MG.data_graphic({
      title: "Line Chart",
      description: "This is a simple line chart.",
      data: data,
      width: 600,
      height: 200,
      right: 40,
      target: this.elem,
      x_accessor: 'date',
      y_accessor: 'value'
    });
  }

  render() {
    return <div ref={el => {if (el){this.elem = el}}}></div>;
  }
}

export default Graph;