带有标签的React recharts饼图问题答案

【问题标题】：React recharts pie chart problem with labels带有标签的React recharts饼图问题
【发布时间】：2020-12-16 12:49:41
【问题描述】：

我在 React 和 recharts 库中使用 Class 组件来显示 recharts。我从父组件获取数据，在子组件中对其进行格式化，一切正常：

问题是当我调整窗口大小时，标签消失了：

我读到这是动画的问题，我可以通过更改 isAnimationActive={false} 来解决它，但如果我想离开动画并修复它怎么办？我尝试将组件更改为功能性组件，添加 React.memo，甚至添加 data={[name:'test', value: 1]} 作为静态数据值，但也没有用。有什么解决办法吗？顺便说一句，我不明白为什么在 2017 年发现了这个问题，但仍然没有解决......作者有什么问题。

【问题讨论】：

一旦我也遇到了类似的问题，我通过创建自定义标签来修复。我知道 isAnimationActive={false} 不适用于此。
我有自定义标签，但我仍然有这个问题

标签： javascript reactjs charts recharts

【解决方案1】：

注意：我假设您在课堂上扩展了 React.Component - 我无法确认这一点，因为我没有您的代码。

请务必在您的班级中扩展 React.PureComponent 而不是 React.Component。这应该可以解决问题。

在 recharts 文档示例中，您可以看到所有组件都扩展了 React.PureComponent: https://recharts.org/en-US/examples

似乎正在发生的事情是 React.Component 正在触发未在 recharts 库中考虑的组件的渲染，因此未调用显示标签的函数 handleAnimationEnd()。

您可以在此处阅读有关问题原因的更多信息：https://github.com/recharts/recharts/issues/1083

【讨论】：