在react中,當乙個元件依賴另乙個元件的寬度或者高度,來設定它的寬度 左右偏移量,該或者做?

時間 2021-05-30 07:54:25

1樓:張振衣

我之前的解決方案是寫乙個 Ruler 類,它在使用者不能意識到的地方進行渲染(可以是 visibility: hidden,或者 z-index,或者放在螢幕外),然後把 width 寫到 redux 裡面。

第二個點在於,這個過程必須經過真實渲染,是無法避開的。

至於那個不需要的切換效果,是可以避免的,現在可以寫控制流程來避免,未來可以使用 React async rendering 相關的 feature

[Umbrella] Async rendering · Issue #8830 · facebook/react

但是你舉的例子感覺不是很好,對 popover 來說,完全可以只用css來實現的,antd 的 popover 實現好像就沒有用到真實 DOM 相關的計算。

A UI Design Language

總而言之,這個東西是 anti-pattern 的,如果能用 css 避免就用 css 避免,在沒有辦法避免的時候,就不得不通過乙個生命週期的渲染得到想要的資料,然後再開始動畫(注意先後次序以避免使用者體驗問題)

2樓:Galen Jiang

很多小夥伴都說css做,但是js是全能的語言,為什麼不能做?我就是要做。

更新做法可以簡單也可以是複雜。我覺得假如想做的好的話,等於重新做了一套css引擎出來了。而且在js裡面做,特別是react這種函式風格的框架下做。

我就說說我的想法,並沒有親自實現。

首先為什麼,因為css的狀態對js來說是不純的,每個css引擎渲染出來的可能不一致。

所以,元件提供乙個狀態改變的props函式,這個函式呼叫內部呼叫,獲取寬高後可以通過action從外部設定。這個狀態的觸發可以根據需求在載入渲染後觸發,或者在拖動後觸發,都是可以的。這裡為什麼不直接設定,有兩個原因,一,這個操作是不純的,二,這個狀態需要被共享。

那麼只能靠乙個不純的操作在外面參與狀態的改變。

那有沒有更方便的,如手柄就是這個側邊欄的子元件,我就是不想把這個狀態曝露出去,這是有幾個做法,乙個用context,乙個用 call return 。call return是什麼可以查react16的更新。還有很多做法都是寫法難看,耦合嚴重的,就不介紹了。

3樓:周剛

標準的做法叫:狀態提公升,比如你的這個情況,你可以將內容獲取放到父節點中,更優雅的做法是給這個元件做乙個函式屬性,內容改變時通知父節點來調整大小;換個角度看這也是合理的,因為側邊欄大小改變了,內容區域也必定改,這就是父元件應該做的事;

這種情況還可以使用Redux了,內容改變的時候發個Action出去,在Reducer中統一處理.

vue中,父元件可以向子元件傳遞乙個元件(不僅是資料)嗎?

星鑽 這個很簡單,前些日子剛實現了乙個這樣的需求,具體實現方法可以參考v if這些自定義指令。寫乙個自定義指令去生成渲染元件即可。下面有些邏輯是因為是直接通過配置檔案去生成頁面的所以需要你自己去除相關邏輯 你看主邏輯就好了,有時間我給你稍微講解下 letFragmentFactory Vue Fra...

在古代當乙個人上人比較爽,還是在現代當乙個普通人比較爽?

治癒or 爽肯定是古代啊 你看上哪個妹子了 對她好一點別太過分就能弄回來當侍妾了 舉個例子 嚴世蕃嚴東樓房間裡床下絲巾很多,每次睡了乙個女人以後就往床下丟乙個,一年下來能攢幾百個 早起吐痰到侍妾嘴裡叫賞賜 多的不說了怕被封號哈哈哈 古代的普通人與無異,現在怎麼可能明目張膽 大石 看你什麼需求。有人憋...

當乙個女生結婚後,在婚姻中如何做自己?

微笑女孩 在步入婚姻的同時,自己就已經擁有了另外乙個身份妻子。想要做好自己的同時,還不能忘了自己新的身份,婚姻和自我就是乙個天平,所以我們既有了新的身份也不能忘了原來的自己 shirley 女生不管結婚不結婚,都需要做好自己。做自己應該做的,做能夠讓自己開心或者有成就感的事情,不要以為結婚了就要忍受...