#javascript #reactjs #charts #recharts
#javascript #reactjs #Диаграммы #восстанавливает
Вопрос:
Я использую компоненты класса в React и перезаряжаю библиотеку для отображения перезарядки. Я получаю данные из родительского компонента, форматирую их в дочернем компоненте, и все работает нормально:
Проблема в том, что когда я изменяю размер окна, метки исчезают:
Я читал, что это проблема с анимацией, и я могу ее исправить, просто изменив isAnimationActive={false} , но что, если я хотел бы оставить анимацию и исправить это? Я попытался изменить компонент на функциональный, добавить React.memo, даже добавленный data={[name:'test', value: 1]} в качестве статического значения данных, но также не сработал. Какие-либо решения? Кстати, я не могу понять, почему эта проблема была обнаружена в 2017 году и до сих пор не исправлена… что не так с авторами.
Комментарии:
1. Однажды я также столкнулся с подобной проблемой, я исправил ее, создав пользовательскую метку. Я знаю, что isAnimationActive={false} не работает с этим.
2. У меня есть пользовательская метка, но у меня все еще есть эта проблема
Ответ №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