如何将脚本连接到 ReactJS 组件？答案

【问题标题】：How to connect a script to a ReactJS component?如何将脚本连接到 ReactJS 组件？
【发布时间】：2021-01-20 23:33:42
【问题描述】：

我有一个带有视频的功能性 ReactJS 组件。该视频应该与脚本交互，但我只能将这个脚本包含在 index.html 中，据我了解，这是不正确的。如何将这些脚本连接集成到反应组件（App.js）中？

我的 index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>React App</title>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script>
    // some script code..
  </script>
  <script>
    window.onload = websocketServerConnect;
  </script>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

我的 App.js

function App() {
  return (
    <div>
      <div>
        <video id="stream" autoPlay playsInline>Your browser doesn't support video</video>
      </div>
      <div>
        Status: <span id="status">unknown</span>
      </div>
      <br />

      <div>Our id is <b id="peer-id">unknown</b></div>
      <br />
      <div>
        <div>getUserMedia constraints being used:</div>
      </div>
    </div>
  );
}

export default App;

如果我只是将脚本代码从 html 粘贴到 app.js，我会出错

Link to Sandbox

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

您可以使用 adapter.js 的 npm 包。并导入 app.jsx 文件。那么就不需要在 index.html 文件中导入了。

【讨论】：