JSX/React interpolation/syntax

Question

我正在使用 map() 迭代对象数组以在我的应用程序上呈现它们。我已经导入了音频文件，我想在映射时为 src 属性引用它们。 src={x.sound} 只计算文本，这是应该的。我怎样才能实现这样的东西 src={{x.sound}} => src={boom} 以便 src 在迭代渲染后实际上是一个有效的路径？

谢谢！

import boom from "./sound/boom.ogg";

const data = [
  {
    key: "Q",
    keyCode: 81,
    sound: "boom",
  },
];

const buttons = () =>
  data.map((x) => (
    <div
      onClick={this.clickHandle}
      id={x.sound}
      className="drum-pad"
      key={x.key}
    >
      {x.key}
      <audio
        id={x.key}
        key={x.key}
        src={x.sound}
        className="clip"
        controls
      ></audio>
    </div>
  ));

Answer 1

在您的示例中，您将字符串 ('boom') 传递给音频标签的来源属性。对于 JS/React，如果当前范围的变量包含以特定字符串命名的变量，则不暗示要查找。

有 2 种方法可以完成这项工作。

您可以更改数据对象的声音属性以引用导入的声音对象（而不是字符串）

import boom from './sound/boom.ogg';

const data = [
  {
    key: 'Q',
    keyCode: 81,
    sound: boom,
  },
];

如果您在服务器的 'public' 文件夹中提供静态文件，您也可以将音频文件放在那里。然后使用相对路径获取它。

const data = [
  {
    key: 'Q',
    keyCode: 81,
    sound: './boom.ogg',
  },
];

JSX/React interpolation/syntax

JSX/React interpolation/syntax

string-interpolation

jsx

reactjs