Question

我一直在努力在React中创建一个小型音乐播放器程序。我想知道是否有一种方法可以一次将所有这些值作为单个导入语句导入？

我注意到，当我尝试将值硬编码到props数组中时，它将无法工作，因为实际上是从/ static / media目录中获取文件的。

示例代码：

// Lightweight library for audio playing
import ReactAudioPlayer from 'react-audio-player';
import LikeBtn from './LikeBtn';
import Shuffle from '../img/shuffle_bg.jpg';
// Imports from music audio files
import track1 from '../music/Arc North - Catch Me When I Fall (ft. Sarah de Warren) [Magic Release].mp3';
import track2 from '../music/Ellis - Clear My Head.mp3';
import track3 from '../music/Jim Yosef & Alex Skrindo - Ruby [NCS Release].mp3';

// Import music covers
import bg1 from '../img/song_covers/42388294_800_800.jpg';
import bg2 from '../img/song_covers/clearhead.jpg';
import bg3 from '../img/song_covers/000377402250.jpg';

class Player2 extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      playlist: [
      // This would work because it fetches the imported value.
      {id: 1, name:'Catch Me When I Fall', author: 'Arc North ft. Sarah de Warren', img: bg1, audio: track1}, 
      // Does not work because it doesn't actually fetch the data from relative path.
      {id: 2, name:'Clear My Head', author: 'Ellis', img: '../img/song_covers/clearhead.jpg', audio:'../music/Ellis - Clear My Head.mp3},

Answer 1

您可以按如下所示创建文件“ mediaFiles.js”，然后仅导入该文件

 export default {
  img1: require('../Assets/img/shuffle_bg.jpg'),
  track1: require('../music/Ellis - Clear My Head.mp3'),
  }

在您的Player2文件中，输入以下行：

import mediaFiles from '../Utils/mediaFiles';

您应该能够像这样使用它，

this.state = {
          playlist: [
          {id: 1, name:'Catch Me When I Fall', author: 'Arc North ft. Sarah de Warren', img: mediaFiles.img1, audio: mediaFiles.track1}]

仅供参考：相应地更新路径

在React中导入prop数组值？

1 个答案: