Javascript &引用；useRefs"；变量div引用的初始值？

我试图建立一个音频进度与反应挂钩酒吧。我正在学习一个关于react类组件的教程，但是在参考中有点迷路了

当页面加载时，如何为useRef变量提供div ref的初始值

一旦我开始播放，我就会收到一个错误，说不能读取空的offsetwidth。显然，timeline ref是空的，因为它没有初始值。如何将其连接到useEffect挂钩中id为timeline的div

const AudioPlayer = () => {
  const url = "audio file";

  const [audio] = useState(new Audio(url));
  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0)
  let timelineRef = useRef()
  let handleRef = useRef()

  useEffect(() => {
    audio.addEventListener('timeupdate', e => {
      setDuration(e.target.duration);
      setCurrentTime(e.target.currentTime)
      let ratio = audio.currentTime / audio.duration;
      let position = timelineRef.offsetWidth * ratio;
      positionHandle(position);
    })
  }, [audio, setCurrentTime, setDuration]);



  const mouseMove = (e) => {
    positionHandle(e.pageX);
    audio.currentTime = (e.pageX / timelineRef.offsetWidth) * audio.duration;
  };

  const mouseDown = (e) => {
    window.addEventListener('mousemove', mouseMove);
    window.addEventListener('mouseup', mouseUp);
  };

  const mouseUp = (e) => {
    window.removeEventListener('mousemove', mouseMove);
    window.removeEventListener('mouseup', mouseUp);
  };

  const positionHandle = (position) => {
    let timelineWidth = timelineRef.offsetWidth - handleRef.offsetWidth;
    let handleLeft = position - timelineRef.offsetLeft;
    if (handleLeft >= 0 && handleLeft <= timelineWidth) {
      handleRef.style.marginLeft = handleLeft + "px";
    }
    if (handleLeft < 0) {
      handleRef.style.marginLeft = "0px";
    }
    if (handleLeft > timelineWidth) {
      handleRef.style.marginLeft = timelineWidth + "px";
    }
  };


  return (
    <div>

      <div id="timeline" ref={(timeline) => { timelineRef = timeline  }}>
      <div id="handle" onMouseDown={mouseDown} ref={(handle) => { handleRef = handle }} />
      </div>
    </div> 
  )
}

constaudioplayer=（）=>{
const url=“音频文件”；
const[audio]=useState（新音频（url））；
const[duration，setDuration]=useState（0）；
常数[currentTime，setCurrentTime]=useState（0）
让timelineRef=useRef（）
让handleRef=useRef（）
useffect（（）=>{
audio.addEventListener（'timeupdate'，e=>{
设置持续时间（如目标持续时间）；
setCurrentTime（例如，target.currentTime）
let ratio=audio.currentTime/audio.duration；
让位置=timelineRef.offsetWidth*比率；
位置手柄（位置）；
})
}，[音频，设置当前时间，设置持续时间]；
常量mouseMove=（e）=>{
位置手柄（e.pageX）；
audio.currentTime=（e.pageX/timelineRef.offsetWidth）*audio.duration；
};
常数mouseDown=（e）=>{
window.addEventListener（'mousemove'，mousemove）；
window.addEventListener（'mouseup'，mouseup）；
};
常数mouseUp=（e）=>{
removeEventListener（'mousemove'，mousemove）；
window.removeEventListener（'mouseup'，mouseup）；
};
常量位置句柄=（位置）=>{
设timelineWidth=timelineRef.offsetWidth-HandlerRef.offsetWidth；
设handleLeft=位置-timelineRef.offsetLeft；
if（handleLeft>=0&&handleLeft timelineWidth）{
handleRef.style.marginLeft=timelineWidth+“px”；
}
};
返回(
{timelineRef=timeline}}>
{handleRef=handle}}/>
)
}

useRef（）hook使用

current

属性返回对对象的引用。

current

属性是

useRef

指向的实际值

要使用引用，只需在元素上设置它：

<div id="timeline" ref={timelineRef}>
<div id="handle" onMouseDown={mouseDown} ref={handleRef} />

和

positionHandle

-您实际上不应该以这种方式在React中设置元素的样式。使用

setState（）

hook，并使用JSX设置样式

const positionHandle = (position) => {
  let timelineWidth = timelineRef.current.offsetWidth - handleRef.current.offsetWidth;
  let handleLeft = position - timelineRef.current.offsetLeft;
  if (handleLeft >= 0 && handleLeft <= timelineWidth) {
      handleRef.current.style.marginLeft = handleLeft + "px";
  }
  if (handleLeft < 0) {
    handleRef.current.style.marginLeft = "0px";
  }
  if (handleLeft > timelineWidth) {
    handleRef.current.style.marginLeft = timelineWidth + "px";
  }
};

useRef（）

钩子使用

current

属性返回对对象的引用。

current

属性是

useRef

指向的实际值

要使用引用，只需在元素上设置它：

<div id="timeline" ref={timelineRef}>
<div id="handle" onMouseDown={mouseDown} ref={handleRef} />

和

positionHandle

-您实际上不应该以这种方式在React中设置元素的样式。使用

setState（）

hook，并使用JSX设置样式

const positionHandle = (position) => {
  let timelineWidth = timelineRef.current.offsetWidth - handleRef.current.offsetWidth;
  let handleLeft = position - timelineRef.current.offsetLeft;
  if (handleLeft >= 0 && handleLeft <= timelineWidth) {
      handleRef.current.style.marginLeft = handleLeft + "px";
  }
  if (handleLeft < 0) {
    handleRef.current.style.marginLeft = "0px";
  }
  if (handleLeft > timelineWidth) {
    handleRef.current.style.marginLeft = timelineWidth + "px";
  }
};

---

感谢你，虽然使用let position=timelineRef.current.offsetWidth*ratio，但它还是很有魅力；感谢你，虽然使用let position=timelineRef.current.offsetWidth*ratio，但它还是很有魅力；