Question

上下文：

简短的解释为什么我要问这个。我有一个带有Redux的React App。我有一个显示聊天室列表的组件。我也有来自Material UI的粘性应用栏。而且chatRooms的列表是粘性的，因此它粘在左侧，而无需滚动中间的聊天列表。这不会起作用，因为chatRooms的列表将隐藏在AppBar的后面，或者最好说是与其重叠。因此，我需要根据AppBar的高度为chatRooms设置top的值。

问题：

我的想法是添加useDimensions钩子并测量AppBar的高度。我需要将引用传递到应用栏。然后将chatRooms的top值设置为此高度。但是我不能直接将此传递给组件。所以我的问题是：

我可以将引用存储在redux存储中吗，或者被认为是不正确的做法？如果可以，该如何解决？

Answer 1

不要在您的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% }

我可以在Redux商店中存储引用吗，还是被认为是不好的做法？

1 个答案: