React JS使用react-modal-video实现点击链接唤起视频播放弹窗遇到问题

核心问题点 #

• 未阻止<a>标签默认跳转行为，点击后直接跳转至视频地址，模态框无法弹出
• react-modal-video组件缺少必填的视频类型、视频地址/ID参数，无法正常加载视频
• ModalVideo组件放在列表循环内部，全局的isOpen状态会触发所有行的模态框同时加载
• 未存储当前选中的播放视频标识，模态框无法匹配要播放的资源
• 列表循环的key属性绑定位置错误，应该绑定在<tr>标签而非内部的<td>标签

修复后代码 #

import React,{useState, useEffect } from "react";
import './App.css';
import Axios from "axios";
import ModalVideo from 'react-modal-video';

function App() {
  const [isOpen, setOpen] = useState(false)
  // 新增：存储当前要播放的视频地址
  const [activeVideo, setActiveVideo] = useState('')
  const [resdata, setresdata] = useState([])
  const showurl = 'http://localhost/react%20project/newapp/src/show.php?function=show';

  const updtcomp = () => {
    Axios.get(showurl) 
    .then(res =>{
      setresdata(res.data)
      console.log(res)
    })
    .catch(err => {
      console.log(err)
    })
  }

  useEffect(() => {
    Axios.get(showurl) 
    .then(res =>{
      setresdata(res.data)
      console.log(res)
    })
    .catch(err => {
      console.log(err)
    })
  }, [])

  return( 
    <div className="App">
      <div className="tblfrm">      
        <table>
          <thead>
            <tr>
              <td>ID</td>
              <td>Name</td>
              <td>Date</td>
              <td>V-Links</td>
              <td>Action</td>
            </tr>
          </thead>
          <tbody>
            { resdata.length > 0 && resdata.map( item => (
              // key绑定到tr上
              <tr key={item.Id}> 
                <td>{item.Id}</td>
                <td>{item.Name}</td>
                <td>{item.date}</td>
                <td>
                  <a 
                    onClick={(e)=> {
                      // 阻止a标签默认跳转行为
                      e.preventDefault()
                      // 记录当前选中的视频地址
                      setActiveVideo(item.video)
                      setOpen(true)
                    }} 
                    href={item.video}
                  > 
                    {item.video} 
                  </a>
                </td> 
                <td>
                  <button>EDIT</button> &nbsp;
                  <button>DELETE</button>
                </td>
              </tr>
            ) ) }
          </tbody>      
        </table>
        {/* 模态框移到循环外部，全局仅渲染一个 */}
        <ModalVideo 
          // 如果是Youtube/Vimeo/优酷等平台，修改channel为对应值，同时传入videoId而非url
          channel='custom' 
          isOpen={isOpen} 
          video={{
            url: activeVideo,
            attrs: {
              controls: true // 开启视频控制条
            }
          }}
          onClose={()=> {
            setOpen(false)
            // 关闭时清空当前视频，避免下次打开闪之前的内容
            setActiveVideo('')
          }}
        />
      </div>      
    </div>   
  )
}
export default App;

额外说明 #

如果你的视频来自Youtube、Vimeo、优酷这类公共平台，不需要用custom模式，将channel改为对应平台标识（youtube/vimeo/youku），再从视频链接里提取对应的videoId传入组件即可，不需要传完整url。

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