React dynamiczne rozszerzanie rodzica

Question

Cześć, mam takie pytanie. Jak mogę zmienić rozmiar rodzica, tak by się dopasował do zmiany pozycji dziecka, za pomocą na przykład translate?

Załóżmy, że mam taki kod:
 

<div>
                            <div style={{transform: `translateY(50px)`}}>
                                dziecko
                            </div>
                            <div style={{transform: `translateY(50px)`}}>
                                dziecko
                            </div>
                            <div style={{transform: `translateY(50px)`}}>
                                dziecko
                            </div>
                            <div style={{transform: `translateY(20px)`}}>
                                dziecko
                            </div>
                        </div>

I chciałbym, by rodzic dopasował się tak, by mieć w sobie wszystkie dzieci

Answer 1

Ja bym nadał każdemu dziecku property ref, na tej podstawie w rodzicu znalazł dziecko z największą wartością translate i rodzicowi ustawił width na conajmniej taką wartość. Jeśli przewidujesz ustawiać również ujemny translate, to wtedy znajdź dziecko o najmniejszym i największym translate (przydadzą się Math.min oraz Math.max), zsumuj te wartości (możesz tu wykorzystać Math.abs) i ustaw wynik jako width rodzica. 

Comments

Chciałem zrobić coś podobnego, mianowicie: Znaleźć ostatnie, dynamicznie dodane dziecko, bo ono zawsze będzie najniżej, ale gdy zacząłem skakać po nich i ciągle zmieniać referencję dla wskaźnika, to ostatecznie zwróciło null, jako referencję

No i wtedy musiałbym zmienić state w renderze a z tego co wiem, jest to grzech śmiertelny

---

gdy zacząłem skakać po nich i ciągle zmieniać referencję dla wskaźnika, to ostatecznie zwróciło null, jako referencję

W jaki sposób to robiłeś i po co? 

---

let lastDivReference = React.createRef()

//tutaj inny kod

{
                                this.state.saturday.map((item, index) => {
                                    return (                                        
                                        <div style={{background: item.color, height: '50px', width: '100%', zIndex: 2, position: 'relative'}} ref={lastDivReference}>
                                            {
                                                item.name
                                            }
                                        </div>
                                    )
                                })                            
                            }

W tej pętli, szukając ostatniego elementu, po prostu stworzyłem referencję i skakałem. A szukałem go dlatego, bo ostatni element zawsze będzie tym najniższym

---

To wygląda na przypisanie wszystkim <div>om w pętli tej samej referencji. Wstaw do tej pętli warunek, że dla ostatniej iteracji ustawiasz lastDivReference - wtedy przypiszesz jedną do ostatniego elementu.

Poza tym, patrząc po kodzie z pytania, to ostatni element ma najmniejsze przesunięcie (20px), a reszta ma większe i jednakowe (po 50px). Skąd więc pomysł żeby tą referencję nadać ostatniemu elementowi, a nie wyszukać w ich liście dzieci takiego, który ma największą wartość dla translate?

---

A to nie powinno działać jak wskaźnik? Mianowicie, że najpierw ustawiamy wskaźnik na 1 div, potem na drugi a na końcu wskaźnik jest ustawiony na ostatni div?

PS. Rozwiązałem problem, ale ciekawi mnie jeszcze powyższe pytanie

---

Ale po co Ci referencje na wszystkie dzieci? Skoro chcesz, aby rodzic pomieścił wszystkie dzieci, to - zakładając, że one są ułożone w jednej kolumnie i różnią się tylko przesunięciem - powinno wystarczyć pobranie największego wysunięcia z dzieci i na tej podstawie ustawienie szerokości rodzica. Jeśli z góry wiesz jakie przesunięcia mają poszczególne dzieci, to wystarczy Ci referencja tylko jednego dziecka - ba, w ogóle na dzieci nie musisz zapinać referencji, a bardziej na rodzica. Bo skoro znasz przesunięcia dzieci, to samą maksymalną wartość też znasz. A żeby ustawić rodzicowi szerokość, to na niego ustaw referencję.