在 React js 视频模式中出现问题

Question

单击视频链接时，我正在尝试制作可播放视频的模型，但不知道该怎么做。尽力而为，但无法解决。我从互联网上选择了一个逻辑，但没有奏效。我还注释掉了modal部分。在此先感谢...

代码 ................................... .........................

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 [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)
        })
  }, [])
  console.log(resdata)

return( 
<div className="App"><br/>
          
      <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( resdata => (
              <tr> 
              <td key={resdata.Id}>{resdata.Id}</td>
                <td key={resdata.Name}>{resdata.Name}</td>
                <td key={resdata.date}>{resdata.date}</td>

    {/* trying to make a video playable modal on click of the link  */}
                
                <td key={resdata.video}>
                <a onClick={()=> setOpen(true)} href={resdata.video}> 
                {resdata.video} </a>
                <ModalVideo isOpen={isOpen} onClose={()=> setOpen(false)}/>
                </td> 

                <td>
                <button>EDIT</button> &nbsp;
                <button>DELETE</button>
                </td>
                </tr>
              ) ) }
            </tbody>      
        </table>
      </div>      
</div>   
  )
}
export default App;

Answer 1

我用按钮让它与众不同，因为它对我来说很复杂..

 <button onClick={()=>setModalIsOpen(true)}> VIEW </button> &nbsp;
                <Modal isOpen={modalIsOpen}> 
                <ReactPlayer controls  
                width="90%"
                height="calc(90vh - 90px)"
                url={resdata.video}
                 />
                </Modal>