ReactJS中渲染Clappr播放器

我使用Clappr player與ReactJS。ReactJS中渲染Clappr播放器

我希望Clappr播放器組件在我點擊切換按鈕時出現並銷燬。但是看起來像Clappr播放器創建時，整個頁面都會重新加載（切換按鈕消失並顯示在閃爍中）。因此，這裏是我的代碼：

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

任何人都可以解釋，爲什麼？以及如何解決這個問題？

編輯1：我有點理解爲什麼按鈕重新加載。這是因爲在index.html<head>，我加載了一些CSS。當頁面重新渲染時，它首先加載CSS，然後執行我的app.min.js。如果我將css標籤移動到<script src="app.min.js"></script>下，該按鈕不會在眨眼中重新加載。但它並沒有解決我的問題呢。因爲css文件必須放入<head>標籤。任何幫助？。:(

來源

2016-08-19 Dealig29

這裏有一個running (jsbin link)的例子，我簡單一點點，它仍然顯示你的主要要求：

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'));

還要確保按鈕class屬性重命名爲className

也許你可以從這裏工作找到你確切的問題嗎？希望有幫助

來源

2016-08-19 08:11:05

在Clappr的文檔中，我發現了一個像how to use clappr with reactjs

來源

2016-08-19 11:43:08

ReactJS中渲染Clappr播放器

回答

相關問題