Javascript 尝试在typescript中使用React useref时出错

使用React和typescript，我正在构建一个tabs组件，您可以使用overflow:scroll set从左向右滚动顶部的选项卡链接。这与触控板配合使用，但我需要为鼠标用户实现一种方法，以便他们可以像此代码笔中那样单击和滚动： 到目前为止，我为选项卡内容上方的选项卡链接编写的代码如下所示：

{React.Children.map（Children，（child，index）=>（//在这里通过选项卡链接循环））}

tabLinks div是需要通过触摸板和鼠标水平滚动的div（单击并拖动）

我的第一次尝试是使用react useRef为类名为“tabLinks”的div创建一个ref

const ref = React.useRef<HTMLDivElement>(null)

---

常数偏移=参考电流？.offsetLeft？？0;

同样适用于：

scrollLeft=参考当前？scrollLeft？？0;

这确保当当前ref为null时，两个变量都有一个数值

您将需要null合并运算符。如果您没有可用的，请使用：

---

常数偏移=参考电流？.offsetLeft | | 0；

---

scrollLeft=ref.current？.scrollLeft | | 0

尝试

ref.current.offsetLeft

使用ref.current.offsetLeft会导致错误：“对象可能为null”当然，它被初始化为null，所以您只需要检查它是否为null.ref.current？。offsetLeft@cbr我对打字很陌生，我该怎么做呢？这解决了我面临的一个问题。我已经更新了我原来的帖子来显示所有的代码。这就是我试图通过点击和拖动来实现滚动的方式。有什么帮助吗？您可以从

ref.current

not

ref

获取当前的ref值，我在哪里没有这样做？

ref.scrollLeft

Property 'offsetLeft' does not exist on type 'RefObject<HTMLDivElement>'

Uncaught TypeError: Cannot add property scrollLeft, object is not extensible
    at onMouseMove (index.tsx:102)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
    at executeDispatch (react-dom.development.js:561)
    at executeDispatchesInOrder (react-dom.development.js:583)
    at executeDispatchesAndRelease (react-dom.development.js:680)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)
    at forEachAccumulated (react-dom.development.js:662)