1

我正在开发一个小部件仪表板，其中包含 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），react 会重新呈现小部件，从而用上面的全新空占位符 div “覆盖”现有图表（子）。

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

非常相似的代码可以在这里找到。实际代码在这里。想象一下上面的代码段行（稍后附加图表的空图表占位符）在第 44 行。

4

1 回答 1

1

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

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)
};
于 2016-10-13T22:36:56.303 回答