Question

我正在尝试在React中创建一个新的依赖状态的Audio实例。当使用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（）函数才似乎起作用。

Answer 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 () {
    // ...
  }
}

在React中播放状态相关的音频文件

1 个答案: