如何在 React 组件上调用方法 (Amcharts-React)

Question

有没有办法在图表上唤起一个方法。如：

chart.zoomOut()

我正在努力寻找图表对象的句柄。要渲染我使用的图表：

<AmCharts ref={`chart_${this.props.tileid}`} {...this.chart} dataProvider={this.props.data} />

https://github.com/amcharts/amcharts3-react

我尝试检查元素以查看是否可以通过以下方式访问这些方法：

ch = this.refs[`chart_${this.props.tileid}`]

但是在 'ch' 对象中我似乎找不到任何提到的方法： https://docs.amcharts.com/3/javascriptcharts/AmSerialChart#zoomOut

如何引用元素以在其上调用方法？

Answer 1

您将不得不与 amCharts3-react 的维护者交谈。包装器组件库可以定义组件以接受作为属性的事件处理程序，当调用包装器的 componentDidMount 方法时调用该事件处理程序，以便事件处理程序可以获取对象的实例包装器组件是一个容器。

示例：

// Note, this is just a hypothetical property. It will not actually do anything
// when applied to your code.
<AmCharts onChartRendered={chart => this._amChart = chart } {...props} />

但包装器的作者似乎没有定义接受任何此类组件的组件属性，因此您无法从 amCharts 调用任何方法。

Answer 2

amchart3-react 组件将图表设置为状态。因此可以通过调用调用该方法：

this.refs.chartref.state.chart.zoomOut();

如何在 React 组件上调用方法 (Amcharts-React)

How to envoke a method on a react component (Amcharts-React)

amcharts

reactjs