1

我已经实现了一个类似属性的滑块。在每张幻灯片中，都有一个视频及其名称。我正在使用 [react-player][1] 显示视频缩略图。单击任何视频后，模态将打开并播放我渲染的视频，反应播放器是灯光属性始终为真。但是，一旦您单击滑块的特定位置失去光属性的视频，它就不起作用了。

import React, { Component } from 'react'
import IndividualSlider from './IndividualSlider'
import ModalVideo from 'react-modal-video'
import { Modal, Button } from 'antd';

import ReactPlayer from 'react-player/youtube';


export class Experience extends Component {
  constructor(){
    super();
    this.state={
        Video:[
            {
                url:'https://www.youtube.com/embed/H2yCdBIpxGY',
                name:'Recurssion'
            },
            {
                url:'https://www.youtube.com/embed/s5YgyJcoUI4',
                name:'Array'
            },
            {
                url:'https://www.youtube.com/embed/_C4kMqEkGM0',
                name:'DP'
            },
            {
                url:'https://www.youtube.com/embed/VBnbYNksWTA',
                name:'Graph'
            },
            {
                url:'https://www.youtube.com/embed/M1q3Pzk2UXs',
                name:'Trie'
            }
        ],
        modalIsOpen:false,
        modalLink:""
    }
    this.left = this.left.bind(this);
    this.right=this.right.bind(this);
    this.modalPlay = this.modalPlay.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.handleOk = this.handleOk.bind(this);
}

    handleOk = e => {
      console.log(e);
      this.setState({
      modalIsOpen: false,
     });
    };

    handleCancel = e => {
      console.log(e);
      this.setState({
      modalIsOpen: false,
     });
    };

   modalPlay=(link)=>{
     this.setState({
        modalIsOpen:true,
        modalLink:link
    })
   }

  right=()=>{
    let arr = this.state.Video;
    let temp = arr[0];
    arr.shift();
    arr.push(temp);
    this.setState({
        Video:arr
    })
   }

   left=()=>{
    let arr = this.state.Video;
    let temp = arr[arr.length-1];
    arr.pop();
    arr.unshift(temp);
    this.setState({
        Video:arr
    })
   }

   render() {
    return (
        <div className="ExperienceAClass">
            <div className="OneWeekHeading">
                <h2 className="OneWeekCaption">
                    Experience a class
                </h2>
                <hr className="MentorsCaptionUnderLine" align="center" width="50%"></hr>
            </div>

             <Modal
                title=""
                visible={this.state.modalIsOpen}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={null}

            >
              <ReactPlayer className="ModalVideo" url={this.state.modalLink}/>  
             </Modal>    
            
            <div className="EntireSliderWrapper">
            <a class="prev" onClick={this.left}>
            </a>

            <div className="VideoSlider">
                {this.state.Video.map((child,index)=>{
                        return <IndividualSlider modalPlay={this.modalPlay} url={child.url} name= 
                                {child.name}/>
                })
                }
            </div> 
            <a class="next" onClick={this.right}>
            </a>       
            </div>      
        </div>       
      )
  }
}

export default Experience

而IndividualSlider组件如下：

import React, { Component } from 'react'
import ReactPlayer from 'react-player/youtube';


export class IndividualSlider extends Component {
 constructor(){
    super();
    this.state={
        light:true
    }
    this.onClick=this.onClick.bind(this)
 }

  onClick=()=>{
    let modalPlay=this.props.modalPlay;
    modalPlay(this.props.url);
   }

   render() {
     return (
        <div className="VideoDetails fade">
             <ReactPlayer className="YoutubeVideo" onClick={this.onClick} light = 
              {this.state.light} url={this.props.url}/>
            <p>
                {this.props.name}
            </p>
        </div>
    )
  }
}

export default IndividualSlider

在上面的代码中，我让 light 属性始终为真。单击幻灯片时，此组件将呈现，但未保留缩略图属性。

此外，当模式关闭时，视频会继续播放。如何处理？

正如您所看到的那样，播放的视频恢复了它light={true}曾经滑动但播放时的位置并不意味着light={true}

4

1 回答 1

1

我相信问题在于，因为你有两个 React 播放器实例，一个有 light 属性传递给它，另一个没有。由于您总是希望 light 属性起作用，因此将其作为设置为 true 的 prop 传递。

light 属性在单个滑块中工作，因为您确实在单个滑块中设置它

// Inside IndividualSlider component  you have this
 <ReactPlayer className="YoutubeVideo" onClick={this.onClick} light = 
              {this.state.light} url={this.props.url}/>
// remove state it and make it like this, since state is not needed
 <ReactPlayer className="YoutubeVideo" onClick={this.onClick} light={true} url={this.props.url}/>

现在您在单击单个视频时失去了灯光，因为该视频是在父组件（体验组件_，并且您没有传递灯光道具）中呈现的

// In Experience Component you have this
<ReactPlayer className="ModalVideo" url={this.state.modalLink} />  
// change it to 
<ReactPlayer className="ModalVideo" url={this.state.modalLink} light={true} />
于 2020-10-24T07:31:07.017 回答