React：空占位符div被重新渲染，从而删除子节点（asynchr附图）

Question

我正在开发一个小部件仪表板，它将DC.JS图表作为每个小部件的内容。

使用react-grid-layout创建/删除小部件，这会创建一个空的占位符节点，如下所示：

<div id={"content_" + this.props.id} className="widgetContent"> /* chart is later drawn here */ </div>) 

DC.JS稍后通过Id选择div并将其SVG图表作为子项附加。

问题是，对于某些事件（如切换静态或更改窗口小部件的ID），反应重新呈现窗口小部件，从而用一个全新的空占位符div“覆盖”现有图表（子项），如上所述。

我的问题是，如果可以通过React技术解决这个问题（我可以防止div被重新渲染吗？）或者这是否是库本身的问题。

非常相似的代码可以找到here。行动中的代码是here。想象一下line 44上面的片段行（后面附有图表的空图表占位符）。

Answer 1

这里的常见解决方案是将此图表包装在shouldComponentUpdate设置为false的组件中。这样反应永远不会改变图表库修改的元素。可以找到一个示例包装器组件here（包括下面）

var React = require('react/addons');
var ReactIgnore = {
    displayName: 'ReactIgnore',
    shouldComponentUpdate (){
        return false;
    },

    render (){
        return React.Children.only(this.props.children);
    }
};

module.exports = {
    Class: ReactIgnore,
    Component: React.createClass(ReactIgnore)
};