javascript - 如何在React中动态生成导入文件的路径

Question

我在 React 中生成导入文件的动态路径时遇到问题。 我使用 map() 函数生成代码的动态部分，该部分是相同的几个 div 元素的序列，该 div 内有一个音频元素。此代码如下所示:

    {soundsName.map((sound, i) => {
          return (
            <div
              className="drum-pad"
              onClick={this.soundPlay}
              title={"Sound " + sound}
              key={i}
            >
              <audio className="clip" id={sound}>
                <source src={`s${i}`} type="audio/mpeg"></source>
              </audio>
              {sound}
            </div>
          );
        })}

我的问题是“src”中“source”元素的生成路径是错误的。 路径只是导入文件的名称，如“s1”、“s2”、“s3”等。

文件导入如下:

    import s0 from "./assets/sounds/s1.mp3";
    import s1 from "./assets/sounds/s2.mp3";
    import s2 from "./assets/sounds/s3.mp3";
    import s3 from "./assets/sounds/s4.mp3";
    import s4 from "./assets/sounds/s5.mp3";
    import s5 from "./assets/sounds/s6.mp3";
    import s6 from "./assets/sounds/s7.mp3";
    import s7 from "./assets/sounds/s8.mp3";
    import s8 from "./assets/sounds/s9.mp3";

我真的不知道我做错了什么:( 也许你们中有些人知道这一点？

感谢您的帮助。

Answer 1

您应该将源代码设置为 ./assets/sounds/s${i}.mp3 而不是 s${i}，您将得到以下内容 src =“./assets/sounds/s1.mp3”

根据您的具体情况进行编辑:

将所有组件放入一个数组中，例如:

let soundPaths = [s1, s2, s3, s4 /*... and rest of components */]

然后在你的map()函数中执行

 <source src={soundPaths[i]} type="audio/mpeg"></source>