0

我正在开发一个 React 应用程序，它具有用于创建条形图的 ReCharts。除了在屏幕上显示之外，我还想将图形导出到文件以存储在数据库中。

正如我在这里的其他问题中看到的那样，要导出图表，我可以这样做：

let chartSVG = ReactDOM.findDOMNode(this.currentChart).children[0];
let svgBlob = new Blob([chartSVG.outerHTML], {type: "text/html;charset=utf-8"});

但是我无法插入图表的 DOM 节点名称（this.currentChart）。另一个问题使用的方式对我不起作用：

Uncaught TypeError: Cannot set property 'currentChart' of undefined

我在 findDOMNode 中尝试了组件名称，但出现错误：

Uncaught Error: Element appears to be neither ReactComponent nor DOMNode

我的图形组件在另一个文件中，并在我的顶级 render() 函数中声明如下：

render () {
  return(
    <div ...
      ...
      <br />
        <MyBarChart 
            id="currentChart" 
            ref={(chart) => this.currentChart = chart}
            data={this.props.dataGraph}
         />
      <br />
      ...
    </div>
  );
}

如何调用 ReactDOMNode 才能导出图表？

4

2 回答 2

0

您将 THIS 范围限定为 ref 函数

改变

ref={(chart) => this.currentChart = chart}

至

ref={(chart) => { this.currentChart = chart; } }
于 2017-11-08T18:40:46.990 回答
0

您使用的 ref 会将整个 DOMElement 返回到 this.currentChart，此外，您必须确保在MyBarChart组件完成安装后尝试保存图形，然后它才会返回其 ref。

此外，MyBarChart 是否与 Redux 相关联？

如果是这样，则需要将 ref 解包为...

this.currentChart.getWrappedInstance()
于 2017-11-08T18:23:03.340 回答