所以我正在一个ReactJS / Redux项目中，我有三个按顺序排列的选项卡（A，B，C）（来自React Bootstrap）。每个选项卡均包含一个用d3.js编写的图形。我有水平/垂直条形图和折线图。但是，“ A”和“ C”选项卡上的垂直条形图在C上渲染时存在问题。仅当我从A选项卡过渡到C选项卡时，此功能才有效。如果我从B转到C，则会显示条形图，但没有填充条形（标签，数字值会显示）。似乎渲染存在问题。当我切换第一个标签时-交换A和C，C上的图形开始工作，而A上的图形开始失败。目前，其他d3.js组件（折线图和水平条形图）工作正常。即使使用开发人员工具检查应用程序也没有问题。有人对此有疑问/知道解决方案吗？我们的团队将为您提供任何帮助，我们花了一天的时间来解决此问题。
答案 0 :(得分：0)
d3表示div的正确位置在componentDidMount中。让您的render()方法只用一个引用创建一个div，然后将该引用用作componentDidMount中d3的目标。确保清除componentWillUnmount https://reactjs.org/docs/refs-and-the-dom.html
反应选项卡库通常会从页面DOM中删除不可见的内容。假设您制作了一个如上所述正确安装/卸载的d3图表组件，则该组件应能正常工作。尝试以临时方式进行管理可能会导致奇怪的行为。每个图表应有一个组件。
另一个建议是通过用css display:none隐藏它们来避免不必要地重新渲染d3图表，而不是将它们从DOM中删除。这种方法将进一步避免与d3集成相关的错误，并在切换选项卡时显着减少延迟。我不知道执行此操作的选项卡库，但是直接与React一起做将是微不足道的。