Render Clappr lecteur dans ReactJS

Je veux que le composant du lecteur Clappr apparaisse et détruise quand je clique sur un bouton bascule. Mais il semble que lorsque le lecteur Clappr est créé, la page entière est rechargée (le bouton bascule disparaît et apparaît en un clin d'œil). Donc, voici mon code:

ClapprComponent.js

import React, { Component } from 'react' 
import Clappr from 'clappr' 

class ClapprComponent extends Component { 
    shouldComponentUpdate(nextProps) { 
     let changed = (nextProps.source != this.props.source) 
     if (changed) { 
      this.change(nextProps.source) 
     } 
     return false 
    } 
    componentDidMount() { 
     this.change(this.props.source) 
    } 
    componentWillUnmount() { 
     this.destroyPlayer() 
    } 
    destroyPlayer =() => { 
     if (this.player) { 
      this.player.destroy() 
     } 
     this.player = null 
    } 
    change = source => { 
     if (this.player) { 
      this.player.load(source) 
      return 
     } 
     const { id, width, height } = this.props 
     this.player = new Clappr.Player({ 
      baseUrl: "/assets/clappr", 
      parent: `#${id}`, 
      source: source, 
      autoPlay: true, 
      width: width, 
      height: height 
     }) 
    } 
    render() { 
     const { id } = this.props 
     return (
      <div id={id}></div> 
     ) 
    } 
} 

export default ClapprComponent

Video.js

import React, { Component } from 'react' 

import { Clappr } from '../components' 

class VideoList extends Component { 
    constructor() { 
     super() 
     this.state = { 
      isActive: false 
     } 
    } 
    toggle() { 
     this.setState({ 
      isActive: !this.state.isActive 
     }) 
    } 
    render() { 
     const boxStyle = { 
      width: "640", 
      height: "360", 
      border: "2px solid", 
      margin: "0 auto" 
     } 
     return (
      <div> 
       <div style={boxStyle}> 
        {this.state.isActive ? 
         <Clappr 
          id="video" 
          source="http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/sl.m3u8" 
          width="640" 
          height="360" /> 
        : ''} 
       </div> 
       <button class="btn btn-primary" onClick={this.toggle.bind(this)}>Toggle</button> 
      </div> 
     ) 
    } 
} 

export default VideoList

Tout le monde peut expliquer pourquoi? Et comment résoudre ce problème?

Édition 1: Je comprends un peu pourquoi le bouton est rechargé. C'est parce que dans index.html<head>, je charge un peu de CSS. Lorsque la page est rendue à nouveau, elle charge d'abord le css, puis exécute mon app.min.js. Le bouton ne se recharge pas en un clin d'œil si je déplace les tags css sous le <script src="app.min.js"></script>. Mais cela ne résout pas encore mon problème. Parce que les fichiers CSS doivent mettre en <head> tags. De l'aide? . :(

Source

2016-08-19 Dealig29

Ici vous avez un exemple simplifié running (jsbin link) je un peu et il montre encore votre exigence principale:.

class ClapprComponent extends React.Component { 

    componentDidMount(){ 

    const { id, source } = this.props; 

    this.clappr_player = new Clappr.Player({ 
     parent: `#${id}`, 
     source: source 
    }); 

    } 

    componentWillUnmount() { 
    this.clappr_player.destroy(); 
    this.clappr_player = null; 
    } 

    render() { 

    const { id } = this.props; 

    return (
     <div> 
     <p>Active</p> 
     <p id={id}></p> 
     </div> 
    ); 
    } 

} 

class NotActive extends React.Component { 

    render() { 

    return (
     <p>Not Active</p> 
    ); 
    } 
} 

class App extends React.Component { 

    constructor(props){ 

    super(props); 

    this.toggle = this.toggle.bind(this); 

    this.state = { 
     isActive: false 
    } 
    } 

    toggle() { 

    this.setState({ 
     isActive: !this.state.isActive 
    }) 
    } 

    render() { 

    return (
     <div> 

     <h1>Clappr React Demo</h1> 

     { this.state.isActive ? 
      <ClapprComponent 
       id="video" 
       source="http://www.html5videoplayer.net/videos/toystory.mp4" 
      /> : 
      <NotActive />} 

     <button onClick={this.toggle}>Toggle</button> 

     </div> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('app'));

Assurez-vous également de renommer le bouton class propriété pour className

Peut-être vous pouvez travailler à partir d'ici pour trouver votre problème exact? Espérons que cela aide

Source

2016-08-19 08:11:05

Dans la documentation de Clappr j'ai trouvé une source similaire à how to use clappr with reactjs

Source

2016-08-19 11:43:08

Render Clappr lecteur dans ReactJS

Répondre

Questions connexes