Question

当我点击切换按钮时，我希望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。如果我移动<script src="app.min.js"></script>下的css标签，按钮不会闪烁重新加载。但它还没有解决我的问题。因为css文件必须放入<head>标签。有帮助吗？：（

Answer 1

这里有一个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。

也许你可以在这里找到确切的问题？希望有所帮助。

Answer 2

在Clappr的文档中，我发现了类似于how to use clappr with reactjs

的内容

在ReactJS中渲染Clappr玩家

2 个答案: