javascript - 尝试将媒体播放器代码从 JavaScript 转换为 ReactJS 时出错 : Unexpected token

Question

我正在尝试编写自己的自定义媒体播放器，但遇到了一些问题。

我理解 JavaScript，但我不明白下面的 JavaScript 如何转换为 ReactJS。注意:我已将媒体播放器 ID 更改为 #player

我得到的错误是

  Line 5:  Parsing error: Unexpected token  3 | export default class MediaPlayer extends Component{
  4 | >
  5 |    var x = document.getElementById("player");
    |        ^
  6 | 
  7 | 
  8 |     componentDidMount(){

这是原始的 JavaScript 代码。

<script>
    var x = document.getElementById("myAudio"); 

    function playAudio() { 
        x.play(); 
    } 

    function pauseAudio() { 
        x.pause(); 
    } 
</script>

我的 ReactJS 代码

import React, {Component} from 'react';

export default class MediaPlayer extends Component{
    componentDidMount(){
        var x = document.getElementById("player"); 
    }

    onClickPlay() {
        x.play(); 
    }

    pauseAudio(){
        x.pause();
    }
    render(){
        return (
            <div>
            <h3>mediaplayer</h3>

            <audio id="player">
                <source src="https://samcloud.spacial.com/api/listen?sid=106487&m=sc&rid=184639" type="audio/mpeg"/></audio>
            <button onClick={this.onClickPlay}>Play</button>
            </div>
        )
    };
}

Answer 1

问题:您在 onClickPlay 和 pauseAudio 函数中使用了 x，但是他们对此有问题引用，因为 var 是在 componentDidMount 范围内定义的。

解决方案:看这个codesandbox :

• 将播放/暂停逻辑统一到一个函数 onClickPlay 中。
• 请注意 var x = document.getElementById("player"); 在 onClickPlay 中。
• 我还使用了一个钩子(Hook)来保存一个 bool 值，指示 isPlaying 与否。

希望对您有所帮助。

import React, { useState } from "react";
import ReactDOM from "react-dom";

const MediaPlayer = () => {
    const [isPlaying, setIsPlaying] = useState(false);

    const onClickPlay = () => {
        var x = document.getElementById("player");
        if (isPlaying) x.pause();
        else x.play();
        setIsPlaying(!isPlaying);
    }

    return (
        <div>
            <h3>media player</h3>
            <audio id="player">
                <source
                    src="https://samcloud.spacial.com/api/listen?sid=106487&m=sc&rid=184639"
                    type="audio/mpeg"
                />
            </audio>
            <button onClick={onClickPlay}>Play</button>
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MediaPlayer />, rootElement);

这里有 React v16.8 之前的替代方案:

class MediaPlayer extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isPlaying: false }
        this.onClickPlay = this.onClickPlay.bind(this);
    }

    onClickPlay() {
        const { isPlaying } = this.state;
        var x = document.getElementById("player");
        if (isPlaying) x.pause();
        else x.play();
        this.setState({
            isPlaying: !isPlaying
        });
    }

    render() {
        return (
            <div>
                <h3>media player</h3>
                <audio id="player">
                    <source src="https://samcloud.spacial.com/api/listen?sid=106487&m=sc&rid=184639" type="audio/mpeg" />
                </audio>
                <button onClick={this.onClickPlay}>Play</button>
            </div>
        );
    }
}

ReactDOM.render(<MediaPlayer />, document.getElementById('container'));