#reactjs #d3.js #react-bootstrap
#reactjs #d3.js #реагирование-начальная загрузка
Вопрос:
Итак, я работаю над проектом ReactJS / Redux, где у меня есть набор из 3 вкладок (A, B, C) в таком порядке (из React Bootstrap). Каждая из этих вкладок содержит график, записанный с d3.js . У меня есть горизонтальные / вертикальные гистограммы и линейная диаграмма. Однако вертикальные гистограммы, которые находятся на вкладке A и C, имеют проблемы с отображением на C. Это работает только при переходе с вкладки на вкладку C. Если я перейду от B к C, появится гистограмма, но без заполненных столбцов (отображаются метки, числовые значения). Похоже, что у него возникли некоторые проблемы с рендерингом. Когда я переключаю первую вкладку — так что поменяйте местами A и C, график на C начинает работать, а график на A начинает выходить из строя. Другой d3.js компоненты (линейные и горизонтальные гистограммы) на данный момент работают нормально. Даже проверка приложения с помощью инструментов разработчика не показывает никаких проблем. У кого-нибудь была проблема с этим / знаете решение этой проблемы? Любая помощь была бы признательна, поскольку моя команда и я потратили целый день, пытаясь это исправить.
Комментарии:
1. Без кода на этот вопрос невозможно ответить.
2. Это рабочая среда, поэтому я не уверен, что смогу опубликовать код прямо сейчас. Позвольте мне посмотреть, что я могу сделать.
3. Одна из идей может заключаться в том, чтобы убедиться, что графики отображаются сразу один раз, а затем использовать css display, чтобы скрыть их, вместо фактического удаления dom с помощью react. Также рассмотрите возможность асинхронного состояния гонки с обратным вызовом или перехватом react.
4. Хорошо, спасибо! Я использую React Bootstrap, и вкладки монтируются немедленно, поэтому о первом следовало позаботиться — я не уверен, отображает ли он его при запуске приложения и скрывает его или отображает каждый раз, когда вы переключаете вкладки, но я подозреваю, что последнее. Я знаю, что react bootstrap также иногда создает проблемы с вкладками и картами листовок — не могли бы вы порекомендовать какие-либо другие библиотеки компонентов tab из npm, которые могут не страдать от этой проблемы? Я также рассмотрю условие асинхронной гонки.