reactjs - 在 Reactjs 中使用 HTML5 音频标签

Question

我正在尝试使用 HTML5 <audio>在 React 中标记，但它没有被渲染。
这是我第一次使用 React，所以我可能会遗漏一些明显的东西。
我正在使用现有的 Drupal 前端并在 React 中重新构建它。
我所有的其他 HTML 都在工作，但 HTML5 <audio>标签不是。
这是我显示问题的最简单组件:

  const NoData = () => (
    <audio controls="" controlsList="nodownload">
      <source src="/sites/default/files/fruits/apples.mp3" type="audio/mpeg" />
    </audio>
  );

当我查看页面时，HTML 在那里，但它没有被呈现。
这个 HTML 是从我网站的另一部分逐字复制过来的，所以它应该可以工作。
React 应用程序嵌入在 Drupal 页面中，因此我复制了 <audio>标记到 Drupal 页面本身，它在那里工作。它只是没有出现在 React 内部。 <source> 中的文件正在读取标签；如果我将文件更改为无效文件，我会在 Chrome 开发工具中收到警告。
那么我如何使用 HTML5 <audio>在 React 中标记？

Answer 1

就离开 controls像这样:

const App = () => (
  <div>
    <audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" controls />
    <audio controlsList="nodownload" controls>
     <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg" />
    </audio>
  </div>
)
ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>