滚动到隐藏在开头的某个div

Question

我在next.js中构建了一个网络聊天应用程序，我有一个表情符号选择器按钮，当它点击表情符号菜单时出现。问题是，为了让用户看到表情符号的菜单，他必须向下滚动。我试过scrollIntoView()，但它似乎不工作，可能我做错了什么。

<EmoticonContainer >

{showEmojis && (<Picker id="picker" style={{width: '100%'}} onSelect={addEmoji}/>)}

</EmoticonContainer>
<InputContainer id="container"  >
<IconButton onClick={() => {setShowEmojis(!showEmojis),()=>document.getElementById('picker').scrollIntoView(true)}}>
<EmojiEmotionsIcon style={{ color: 'purple' }} fontSize='inherit' />
</IconButton>
<Input style={{fontFamily:"Roboto",fontSize:"12px"}} onKeyUp={()=>ChangeSendIcon()} onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }} value={input} onChange={e=> setInput(e.target.value)}/>
<div>
<IconButton id="send" onClick={sendMessage} style={{ color: 'purple',display:'none' }} disabled={!input} type="submit">
<SendIcon></SendIcon>
</IconButton>
<IconButton style={{ color: 'purple'}} id="record" onMouseUp={()=>record()}>
<MicIcon ></MicIcon> 
</IconButton>
<IconButton style={{ color: 'purple',display:"none" }} onClick={()=>stop()} id="stop" >
<StopIcon></StopIcon> 
</IconButton>
</div>


</InputContainer> 

我试过这个，但它似乎不工作:

useEffect(() => {
if(showEmojis) {
document.getElementById('picker').scrollIntoView(true)
}
} , [showEmojis])

Answer 1

用React.useRef()钩子代替document.getElementById('picker').scrollIntoView(true)。

。在函数的开头

const pickerRef = useRef()

然后在useEffect钩子

中

useEffect(() => {
if(showEmojis) {
pickerRef.current.scrollIntoView(true)
}
} , [showEmojis])

然后在你的返回体

<Picker ref={pickerRef} id="picker" style={{width: '100%'}} onSelect={addEmoji}/>

不建议在jsx中使用javascript query .