如何将普通JS脚本改写为React函数组件可用代码并解决videoslider未声明报错

你出现报错和功能失效的原因有三点：

• 事件绑定语法错误：React的事件监听属性为驼峰命名onClick，而非原生的小写onclick，且不能直接传入字符串形式的函数调用，需要传入函数实例
• 原生DOM操作不符合React规范：直接用document.querySelector修改DOM属性属于命令式操作，React更推荐用状态驱动视图更新
• 属性命名错误：React中给元素指定CSS类需要用className属性，而非原生的class

推荐使用状态驱动的写法，完整组件代码如下：

import { useState } from 'react'

function VideoSlider() {
  // 用状态存储当前播放的视频地址
  const [currentVideo, setCurrentVideo] = useState('1.mp4')

  const videoslider = (link) => {
    setCurrentVideo(link)
  }

  return (
    <div className="container">
      <video 
        src={currentVideo} 
        className="slider" 
        autoplay 
        loop 
        muted 
        controls
      ></video>

      <ul>
        <li onClick={() => videoslider('1.mp4')}><video src="1.mp4"></video></li>
        <li onClick={() => videoslider('2.mp4')}><video src="2.mp4"></video></li>
        <li onClick={() => videoslider('3.mp4')}><video src="3.mp4"></video></li>
        <li onClick={() => videoslider('4.mp4')}><video src="4.mp4"></video></li>
        <li onClick={() => videoslider('5.mp4')}><video src="5.mp4"></video></li>
      </ul>
    </div>
  )
}

export default VideoSlider

如果确实需要直接操作DOM元素，可以用useRef钩子替换document.querySelector：

import { useRef } from 'react'

function VideoSlider() {
  // 绑定slider元素的ref
  const sliderRef = useRef(null)

  const videoslider = (link) => {
    sliderRef.current.src = link
  }

  return (
    <div className="container">
      <video 
        ref={sliderRef}
        src="1.mp4" 
        className="slider" 
        autoplay 
        loop 
        muted 
        controls
      ></video>
      {/* 列表部分和上面写法一致 */}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Inception_K