Utilisation de MetricsGraphics.js avec ReactJS

J'essaie d'utiliser la bibliothèque graphique MetricsGraphs.js avec React.js. Comme beaucoup de bibliothèques graphiques, MetricsGraphics fonctionne en mutation directe du DOM. Malheureusement, cela ne fonctionne pas très bien avec ReactJS. J'ai essayé un tas de stratégies différentes, mais je ne semble pas pouvoir passer par le fait que MetricsGraphs.js a besoin d'un accès direct à un élément DOM qu'il peut muter. Ai-je négligé quoi que ce soit, ou est-ce qu'il n'y a aucun moyen d'utiliser MetricsGraphics.js avec React sans modifications sérieuses à la bibliothèque?

Vous pouvez utiliser la propriété ref du composant pour accéder à ses éléments DOM dans React.

Ces refs (références) sont particulièrement utiles lorsque vous devez: trouver le balisage DOM rendu par un composant (par exemple, pour le positionner absolument), utilisez les composants React dans une application non-Réaction plus grande ou passez votre base de code existante à React.

Vous pouvez en savoir plus sur les refs dans React refs documentation

Voici un exemple qui fonctionne aujourd'hui dans mes projets.

 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;

Mise à jour Il fallait mettre à jour le ref pour être un rappel en lieu et place d'une chaîne afin de garder les choses plus simples et de continuer à fonctionner à l'avenir en raison de quelques notes dans la documentation:

Une note de la section Cautions

Si vous souhaitez conserver la résilience de Google Closure Compiler Crushing, assurez-vous d'n'accéder jamais en tant que propriété à ce qui a été spécifié comme une chaîne. Cela signifie que vous devez accéder à l'aide de this.refs['myRefString'] si votre référence a été définie comme ref="myRefString" .

Une note de la section d'attribut String de référence

Bien que les références de chaîne ne soient pas obsolètes, elles sont considérées comme des éléments hérités et seront probablement obsolètes à un moment ou l'autre. Les renvois de rappel sont préférés.

Notez que les références de chaîne sont obsolètes afin que vous utilisiez

 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;