Question

我在Redux应用程序中使用的React组件中有一个D3（v3）图表。处理我的D3图表更新以反映我的Redux商店更改的最佳方法是什么？

现在，我在React组件中有一个函数调用图表的绘图，并且只要调用componentWillUpdate就调用删除上一个图表的函数：

export default class Chart extends Component {
  componentWillUpdate(nextProps) {
   this.removePreviousChart();
   this.drawChart(nextProps.chartData);
  }
  removePreviousChart(){
    const chart = document.getElementById('chart');
    while(chart.hasChildNodes())
      chart.removeChild(chart.lastChild);
    }
  } 
  drawChart() {
   //appends an svg to #chart html element and draws a d3 Chart
  }
  render(){
    this.drawChart();
    return(<div id='chart' />)
  }
}

任何替代方法，伪代码，想法或关于如何改进这个问题的反馈都将不胜感激。

Answer 1

你遵循的方法似乎很好。

  在新的渲染之前立即调用
componentWillUpdate（）   正在收到道具或国家。以此为契机   在更新发生之前执行准备。不调用此方法   用于初始渲染。

请注意，您无法在此处调用this.setState（）。如果您需要更新   状态响应prop更改，使用componentWillReceiveProps（）   代替。

请注意

如果shouldComponentUpdate（），将不会调用
componentWillUpdate（）返回false。

您可以从here

了解更多信息

如果您希望setState()收到newProps，请使用为每个新道具触发的componentWillReceiveProps()。

每次有新道具时，请使用Chart API绘制。

    export default class Chart extends Component {
      componentWillReceiveProps(nextProps) {
       this.removePreviousChart();
       this.drawChart(nextProps.chartData);
      }
      removePreviousChart(){
        const chart = document.getElementById('chart');
        while(chart.hasChildNodes())
          chart.removeChild(chart.lastChild);
        }
      } 
      drawChart(chartData) {
        const chart = document.getElementById('chart'); //fails if DOM not rendered
       //appends an svg to #chart html element and draws a d3 Chart
       //assuming you chart function as Chart(element, data);
        if(chart && chartData){ //draw only if DOM rendered and have chartData
          new Chart(chart, chartData); //calls to draw graph
        }
      }
      render(){
        return(<div id='chart' />)
      }
    }

在React / Redux中更新D3图表

1 个答案: