在 React 中播放依赖于状态的音频文件答案

【问题标题】：Playing state dependent audio files in React在 React 中播放依赖于状态的音频文件
【发布时间】：2018-06-26 18:05:19
【问题描述】：

我正在尝试在 React 中创建一个新的依赖于状态的音频实例。使用 require() 时，我收到警告，“严重依赖：依赖的请求是一个表达式。”我不能简单地导入文件，因为音频的源是状态相关的。我该如何解决这个问题？

以下代码给出了错误：

playSong = () => {
    this.setState(this.state, function(){
    let source = require(this.state.songList[this.state.songIndex].src);
    let audio = new Audio(source);
    audio.play();
    });
}

require() 函数似乎只在给定文字时才起作用。

【问题讨论】：

标签： javascript node.js reactjs audio

【解决方案1】：

很遗憾，您不能 require 动态值。

您可以先将所有文件静态导入songList 数组，然后从中选择正确的：

const songList = [
  require('./path/to/song1.mp3'),
  require('./path/to/song2.mp3')
];

class MyComponent extends React.Component {
  playSong = () => {
    let source = songList[this.state.songIndex].src;
    let audio = new Audio(source);
    audio.play();
  };

  render () {
    // ...
  }
}

【讨论】：