Question

我刚刚将highcharts-react-official（1.1.0）实现为无状态React（16.0.0）组件。

'chartData'是使用父App的状态呈现的，该状态可以根据报告而变化，但是当我的HighchartsWrapper componenet呈现时，它似乎忽略了对'chartData'的更改，并且未呈现正确的（最新的）数据。应用了作为道具传递的其他配置数据（例如，图表类型），当我console.log(props.chartData)时，我可以看到数据是正确的。不会呈现的“ chartData”更改通常是图形上系列数发生更改的更改。

我想念什么吗？预先感谢。

import React from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const HighchartsWrapper = (props) => {
   console.log(props.chartData); // this is always correct

    let options = {
        title: { text: 'My chart' },
        series: props.chartData
    }

    return(
            <HighchartsReact
                highcharts={Highcharts}
                options={options}
            />
    );
}

export default HighchartsWrapper;

Answer 1

新包装器版本已解决此问题。发生问题是因为包装器中没有手动设置oneToOne函数的Chart.update()参数的可能性。现在，您可以简单地将oneToOne={true}设置为组件道具。然后它可以正常工作。

实时示例：https://stackblitz.com/edit/react-yctlyw?file=Chart.js

最诚挚的问候！

具有反应状态的highcharts-react-official渲染问题

1 个答案: