滚动到最初隐藏在反应中的 div

Question

我正在 next.js 构建一个网络聊天应用程序，我有一个表情符号选择器按钮，当它点击表情符号菜单时 appear.The 事情是为了让用户看到他必须滚动的表情符号 down.I 已经尝试过 scrollIntoView() 但它似乎不起作用，可能我做错了什么。

import {Picker} from "emoji-mart";
const pickerRef = useRef()
const[showEmojis,setShowEmojis]=useState(false);

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


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

const EmoticonContainer=styled.div`
display:flex;
flex-direction:column;
`;

我试过这段代码，但它似乎没有 work.It 给我这个错误：类型错误：pickerRef.current.scrollIntoView 不是一个函数

Answer 1

因为它在开始时是隐藏的，所以 pickerRef.current 应该 return undefined 这将导致该错误，因为 undefined 没有方法 .scrollIntoView。要解决此问题，您可以 ?.

pickerRef.current?.scrollIntoView()

参见：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

可选的链接运算符 (?.) 使您能够读取位于连接对象链深处的属性的值，而无需检查链中的每个引用是否有效。

Answer 2

嘿，试着在选择器下面添加一个 div 并滚动到那个 div 因为有时这些第三方库随附 css，您无法覆盖它们

import {Picker} from "emoji-mart";
const pickerRef = useRef()
const[showEmojis,setShowEmojis]=useState(false);

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


return(
<>
   <EmoticonContainer >
        <Picker id="picker" style={{width: '100%'}} onSelect={addEmoji}/>
    </EmoticonContainer>
    <div ref={emojiRef}></div>
</>
)

const EmoticonContainer=styled.div`
display:flex;
flex-direction:column;
`;

试试看它会按照您需要的方式滚动

滚动到最初隐藏在反应中的 div

Scroll into a div that is hidden initially in react

javascript

css

reactjs

next.js