1. ホーム
  2. 質問と答え
  3. レンダーClapprプレイヤーReactJS

レンダーClapprプレイヤーReactJS

2016-08-19 22 views
1

私はClappr playerとReactJSを使用しています。レンダーClapprプレイヤーReactJS

トグルボタンをクリックすると、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

答えて

0

ここでは、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'));

またclassNameにボタンclassプロパティの名前を変更することを確認してください

たぶんここからあなたの正確な問題を見つけることができますか？それが助けてくれるでしょうか？

出典

2016-08-19 08:11:05

 関連する問題

  • 関連する問題はありません^_^