Question

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

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

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才能导出图表？

Answer 1

您正在使用的参考号将把整个DOMElement返回给this.currentChart，此外，您必须确保在MyBarChart组件安装完成后尝试保存图表，然后才会它返回它的参考。

此外，MyBarChart是否与Redux连接？

如果是这样，裁判将需要打开...

this.currentChart.getWrappedInstance()

Answer 2

您将此范围限定为参考函数

变化

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

到

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

如何查找React组件DOM节点名称？

2 个答案: