1

loading我有一个使用我在 redux 中的状态的 react-highcharts 构建的图表。当loadingis时true，该图表应该将其更改为 0.35 并在isopacity时返回 1 。loadingfalse

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

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

和组件：

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}
         >
     // ....

使用该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};
`

我错过了什么吗？我觉得我应该添加更多逻辑shouldComponentUpdate，但我对如何处理这个问题非常迷茫。

4

2 回答 2

1

顺便说一句，您的示例实际上并不包含该ReactHighcharts元素。

您可以使用该<ReactHighcharts isPureConfig={true}属性，这将防止它重新渲染，除非您传入不同的config对象。这可能会有所帮助，只要您可以确保配置对象被视为不可变（例如，不要更改其内部属性并期望图表重新呈现）。

我个人发现react-jsx-highcharts更容易使用，因为这样的事情。

于 2018-11-19T00:57:14.120 回答
1

我建议您使用highcharts-react-official包装器：https ://www.npmjs.com/package/highcharts-react-official

您将能够使用allowChartUpdate允许您阻止图表更新的选项。请看这个活生生的例子：https ://codesandbox.io/s/9j89kxvl3w

于 2018-11-19T15:35:23.970 回答