Question

我尝试将图形库MetricsGraphs.js与React.js一起使用。像许多图形库一样，MetricsGraphics通过直接改变DOM来工作。不幸的是，这与ReactJS并没有很好地发挥作用。我尝试过一系列不同的策略，但我似乎无法克服MetricsGraphs.js需要直接访问可以变异的DOM元素的事实。我是否忽略了任何内容，或者没有办法在没有对库进行严格修改的情况下将MetricsGraphics.js与React一起使用？

Answer 1

您可以使用组件的refs属性来访问React中的DOM元素。

当您需要：查找组件呈现的DOM标记（例如，绝对定位），在较大的非React应用程序中使用React组件或转换现有代码库时，这些引用（引用）特别有用反应。

您可以在in the release notes

中详细了解

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

更新由于文档中的注意事项很少，因此必须将this.refs['myRefString']更新为回调而不是字符串以使事情更简单并在将来保持其工作状态：

React refs documentation

如果您想保留Google Closure Compiler Crushing的弹性，请确保永远不要将其指定为字符串。这意味着如果您的参考定义为ref="myRefString"，则必须使用string queryString = origCommand + customQuery; //Pull in Query string conn = connection.Connection; //Grab Connection using (OleDbConnection connection1 = new OleDbConnection(conn)) { OleDbCommand command = new OleDbCommand(queryString, connection1); command.CommandType = CommandType.Text; try { connection1.Open(); OleDbDataAdapter adapter = new OleDbDataAdapter(command); adapter.Fill(oSet); string firstName = (oSet.Tables[0].Rows[0].ItemArray[9]).ToString(); firstName = firstName.Trim();进行访问。

A note from Cautions section

尽管不推荐使用字符串引用，但它们被认为是遗留的，并且可能在将来的某个时候被弃用。首选回调参考。

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;

将MetricsGraphics.js与ReactJS一起使用

2 个答案: