小编Cyb*_*ame的帖子

useEffect 中未定义变量

我试图currentUser在 Hook 内部的函数中使用 的值useEffect,但该值似乎不是用户的对象,而我在使用它时希望它是用户的对象。这是代码:

function Chat() {   

    const currentUser = useAuth()

    useEffect(() => {
        const fetchParticipants = async () => {
            console.log(currentUser.uid) // not defined
        }
        fetchParticipants()
    }, [])
}
Run Code Online (Sandbox Code Playgroud)

这就是useAuth()正在调用的函数

export function useAuth() {
    const [ currentUser, setCurrentUser ] = useState();

    useEffect(() => {
        const unsub = onAuthStateChanged(auth, user => setCurrentUser(user));
        return unsub;
    }, [])

    return currentUser;
}
Run Code Online (Sandbox Code Playgroud)

javascript firebase reactjs

4
推荐指数
1
解决办法
2303
查看次数

将粘性元素与父元素的右侧对齐

我正在尝试构建一个与右侧对齐的粘性工具栏。但我无法让它与那一侧对齐:

如果我使用float: right;下面的元素,就会被拉起,如果我使用父容器,它会跨越整个屏幕宽度并使用,justify-content: end;并且使用z-index: 10;左右,该父元素的屏幕会被阻止。

那么如何才能最优雅地将元素对齐到右侧呢?

.container {
  background-color: cyan;
  height: 1000px;
}

.sticky-element {
  position: sticky;
  top: 20px;
}

.other-stuff {
  padding: 20px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="sticky-element">
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
   <div class="other-stuff">
    Some other stuff that is drawn up if float: right is applied on sticky-element.
    (But shouldn't)
   </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css

1
推荐指数
1
解决办法
3521
查看次数

标签 统计

css ×1

firebase ×1

html ×1

javascript ×1

reactjs ×1