如何在 React JSX 中调用 Web API?

拉皮斯

我正在使用 React 和 Electron 编写音乐播放器,并希望为音频添加元数据,以便获得 MPRIS 支持。所以我做了一些搜索,发现Media Session API正是我所需要的。为了测试它,我将上述链接包含的示例代码中的代码复制到我项目中的一个函数中。

  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Unforgettable',
    artist: 'Nat King Cole',
    album: 'The Ultimate Collection (Remastered)',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });

我把它放到一个函数中,当播放下一首歌曲时,组件会调用它。但是,我得到了这样的错误:

Failed to compile.

./src/components/FM/Cover/index.jsx
  Line 112:  'MediaMetadata' is not defined  no-undef

Search for the keywords to learn more about each error.

为什么?

哈里·梅里特

您需要引用该window对象。

window.MediaMetadata
^^^^^^

这是因为 babel/es-lint 不知道MediaMetadata存在并且会抛出错误。由于 Chrome 将此对象作为全局变量注入,因此可以通过该window对象访问

(重新发布@AngelSalazar 在 OP 的评论中所说的内容以方便使用)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在React / Jsx中的渲染器内部调用函数

如何在React / JSX组件中嵌入文字<code>片段?

如何在React Native中连接JSX组件

如何在REACT和FLUX中创建API调用

如何在React JSX中添加空格

如何在React / Jsx中的渲染器中调用多个函数

如何在JSX内部的React中循环编号

如何在React组件中测试api调用并在api调用成功后期望视图更改?

如何在React中的JSX中编写for循环?

如何在React JSX中打印子字符串?

如何在React(JSX)中显示项目列表(键值对)?

如何在React / JSX中触发onSelectStart?

如何在React Axios中从WEB API指定JSON数据

如何在React函数组件中调用API?

如何在React jsx中应用响应样式?

Web API HttpDelete-如何在[FromBody]中调用delete API方法并发送模型

如何在React中向API调用函数添加参数

如何在React中很好地组织元素(jsx / css)

如何在React / flux中连接API调用

如何在AngularJS或jQuery中编写Web API调用

在componentDidMount方法后,如何在JSX中使用API数据,React?

如何从 React 中的方法返回 JSX?

如何在 REACT jsx 元素标签中调用图像

React JSX,如何在 JSX 的 html 中编写复杂的条件和 for 循环?

如何在 JSX react native 中编写 switch 语句?

React:如何在我的 JSX 中使用 API 調用的結果?(範圍問題)

如何在 React 中处理 API 调用的授权标头?

如何在 React 中渲染 jsx 调用非组件函数?

react js如何在jsx中添加按钮