上下文:
简短的解释为什么我要问这个。我有一个带有Redux的React App。
我有一个显示聊天室列表的组件。我也有来自Material UI的粘性应用栏。而且chatRooms的列表是粘性的,因此它粘在左侧,而无需滚动中间的聊天列表。
这不会起作用,因为chatRooms的列表将隐藏在AppBar的后面,或者最好说是与其重叠。因此,我需要根据AppBar的高度为chatRooms设置top
的值。
问题:
我的想法是添加useDimensions
钩子并测量AppBar的高度。我需要将引用传递到应用栏。然后将chatRooms的top
值设置为此高度。但是我不能直接将此传递给组件。所以我的问题是:
我可以将引用存储在redux存储中吗,或者被认为是不正确的做法?如果可以,该如何解决?
答案 0 :(得分:3)
不要在您的redux存储中存储引用,有更好的方法来解决此问题。我的布局与您的布局相似,并且仅适用于CSS。由于此重叠问题,应避免发粘,而应使用css网格。
这是我的CSS,如您所见,这里没有粘性,只是整页的网格:
/* Main grid container (2 columns, 2 rows) */
#root {
height: 100%;
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 56px 1fr;
}
/* Top App bar, height=56px */
header {
grid-column: span 2;
}
/* List of chatRooms, width=220px */
aside {
overflow-x: hidden;
overflow-y: auto;
}
/* List of chats */
main {
overflow-y: auto;
}
如果您希望此网格填充整个页面,则需要添加:
html { height: 100% }
body { height: 100% }