尝试将媒体播放器代码从 JavaScript 转换为 ReactJS 时出错:意外的令牌

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>

我的反应代码

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范围内定义的。

解决方案：看看这个代码沙箱：

• 将播放/暂停逻辑统一在一个函数onClickPlay中。
• 请注意，var x = document.getElementById("player");在onClickPlay内部
。
• 我还使用了一个钩子来保存一个布尔值，指示是否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);

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

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

Answer 2

这样做，它会起作用。

import React, {Component} from 'react';
export default class MediaPlayer extends Component{
onClickPlay = () => {
var x = document.getElementById("player");
x.play();
};
pauseAudio(){
var x = document.getElementById("player");
x.pause();
}
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>
)
};
}

您正在组件DidMount中定义变量"x"，但是ClickPlay和pauseAudio上的函数不理解"x"是什么，因为它超出了这些功能的范围。