Ponownie uruchamia responsywny kontener nieprawidłowo zmienia rozmiar w module flexbox
Próbuję utworzyć niestandardową zwijaną legendę dla mojej aplikacji do wizualizacji danych. Używa reagowania i rechartów. komponent renderuje się dobrze za pierwszym razem. Ale kiedy zwijam legendę i ponownie ją otwieram, responsywny kontener nie kurczy się, by pasować. Byłoby łatwiej, gdybym znał rozmiar kontenera nadrzędnego w pikselach, ale nie mam tego rodzaju informacji o renderowaniu. Czy to błąd z rechartami lub flex box, czy też robię to źle?
Oto kod:
https://codesandbox.io/s/8krz9qjk52
https://codesandbox.io/s/8krz9qjk52
Wyjaśnienie: Problem polega na tym, że kiedy zamykam, a następnie otwieram legendę, komponent legendy jest wypychany z rzutni, a diagram nie zmniejsza się z powrotem do swojego pierwotnego mniejszego rozmiaru.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
3 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Zobacz ten numer:
https://github.com/recharts/recharts/issues/172
https://github.com/recharts/recharts/issues/172
Anonimowy użytkownik
Potwierdzenie od:
codesandbox
https://codesandbox.io/s/xpz8y5w77w
Wymienię zmiany, które wprowadziłem, od największych do najmniejszych:
ja
podniósł stan
https://reactjs.org/docs/lifting-state-up.html
z do .
- Teraz
odpowiada za to, co się dzieje. Przekazuje informacje o widoczności do jako rekwizytu. Skąd wie, kiedy należy zmienić stan ma funkcję składową o nazwie , która ustawia jej stan. jest wysyłany do w postaci pomoc. Dlatego renderuje w następujący sposób: Teraz w możemy uwzględnić to w definicji przycisku: zwróć uwagę, że ten szablon działa tylko w jeśli oryginalna funkcja jest powiązana z rodzicem, ponieważ zmienia stan rodzica.
jest terazCSS
Siatkowaty
https://gridbyexample.com/examples/
pojemnik.
- Renderuje styl wbudowany, który obsługuje szerokość kolumn na podstawie stanu.
Zauważ, że to jednostka ułamkowa, która w tym przypadku służy do wypełnienia pozostałej przestrzeni. - W
to , co pozwala na umieszczanie obiektów w siatce w kolumnach. Elementy, które umieściliśmy w siatce, to i , więc to lewa kolumna, a -right . : Kiedy legenda jest widoczna, chcemy, aby lewa kolumna wypełniała 80% szerokości, a prawa kolumna wypełniła resztę. : Kiedy legenda jest niewidoczna, chcemy, aby prawa kolumna zajmowała minimum miejsca, które wypełniają jej elementy, a lewa kolumna - pozostałe miejsce.
ma tylko jedną metodę .- Zamiast
i istnieje jedna metoda, która warunkowo renderuje na podstawie właściwości (w zależności od stanu ). jest teraz zawsze renderowany (jest to element siatki).
Inne drobne zmiany:Zauważysz, że jeśli spróbujesz utworzyć układ siatki, używając tylko jednostek lub dowolnego elastycznego układu w , rozmiar wykresu nie zostanie odpowiednio zmieniony. Niestety firmy Recharts po prostu nie działa zbyt dobrze z Grid lub Flexbox (główni współtwórcy wycofują wsparcie -
bez zatwierdzeń
https://github.com/recharts/re ... ivity
obecnie przez 3 miesiące).
Anonimowy użytkownik
Potwierdzenie od:
w przeciwnym razie , nawet jeśli jego szerokość i wysokość są ustawione na 100%, nie wypełni całego widocznego obszaru. Następnie w zmień to:
do tego:
aby Twój „urósł ... no, responsywny.