JSX/React 插值/语法答案

【问题标题】：JSX/React interpolation/syntaxJSX/React 插值/语法
【发布时间】：2021-01-06 05:04:15
【问题描述】：

我正在使用 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>
  ));

【问题讨论】：

你尝试过使用 require 语法吗？
我猜，只是使用你可以在数据对象中添加导入的boom，然后使用该音频对象
@luckongas 我没有。你的意思是 RequireJS 模块加载器？我正在学习 React，目前正在努力避免任何额外内容。
@Swaraj Gandhi 恐怕我不会跟着你。你能给一个示例代码吗？谢谢。

标签： reactjs jsx string-interpolation

【解决方案1】：

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

您可以通过两种方式完成这项工作。

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

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

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

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

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

【讨论】：