Javascript React highcharts：当某个道具发生变化时，如何阻止图表重新设置动画？

我有一个用react highcharts构建的图表，它使用了我在redux中的

加载状态。当
加载
为
真
时，该图表应将其
不透明度
更改为0.35，当
加载
为
假
时，应将其更改为1

我的问题是，当我将
加载
道具传递到子组件中时，它会重新渲染整个组件，并且每当
加载
更改时，它会使图表动画两次：

  <SeatDemandChart
    seatVolatility={basicInputs.seatVolatility}
    desktopWidth={desktopWidth}
    spaceChartId={spaceChart}
    key={`${mobileScreenResults}_${tab}`}
    netArea={newResults.tradResults.netArea}
    seatChartResults={newResults.seatChartResults}
    measureName={measureName}
    loading={loading}
  />

我错过什么了吗？我觉得我应该为
shouldComponentUpdate
添加更多的逻辑，但我对如何处理这个问题感到非常困惑。
顺便说一句，您的示例实际上并不包含
ReactHighcharts
元素

您可以使用
我建议您使用
highcharts
包装：

您将能够使用
allowChartUpdate
选项，该选项允许您阻止图表更新。请看这个实时示例：
加载道具用于什么？它被传递到使用样式化组件的
StyledChartContainer
。这就是设置不透明度的原因。我会用这个更新帖子。
import ReactHighcharts from 'react-highcharts'

class SeatDemandChart extends Component {
  shouldComponentUpdate(nextProps) {
    return !isEqual(nextProps, this.props)
  }

  render() {
     const { 
       seatChartResults, 
       netArea, measureName, 
       printConfig, 
       seatVolatility, 
       spaceChartId,
       loading,
     } = this.props

     //....

     return (
       <div>
         <StyledChartContainer 
           print={printConfig && location === '/print' ? true : ''}
           loading={loading}
         >
     // ....

export const StyledChartContainer = styled.div`
  box-shadow: 0 2px 4px 0 rgba(39, 43, 47, 0.25);
  transition: opacity 300ms ease-in-out;
  opacity: ${({ loading }) => loading ? 0.35 : 1};
`