Javascript 如何将JS代码放入React组件中

我有一个React组件和我想放在其中的JS代码。我试过了，但完全搞砸了。有人知道怎么做吗

mycomponent.js

 import React from "react";
    import Navbar from "./Navbar";

    const Chat = props => (
      <div>
              //Place for my Js code
      </div>
    );

    export default Chat;

javascript代码

<script src="/socket.io/socket.io.js"></script>
      <script>
        var socket = io();

        socket.on('message', function(msg){
          console.log(msg);
          document.getElementById("message").innerHTML = msg;
        });
      </script>

---

您可以将代码包装在useEffect钩子中。一旦安装组件，它将被触发

您必须从npm安装sockito.io。运行>npm i socket.io-client

也添加了一些改进

import React, { useEffect, useRef } from "react";
import io from "socket.io-client";
const Chat = props => {
    const socket = useRef(null);
    useEffect(() => {
        connectToSocket();
        return () => {
            if (socket.current) {
                socket.current.disconnect()
            }
        }
    }, []);
    function connectToSocket() {
        console.log("Conneting to socket");
        socket.current = io('http://localhost:5000');
        socket.current.on('connect', () => console.log("Connected"));
        socket.current.on('disconnect', () => connectToSocket());
        socket.current.on('message', function (msg) {
            console.log(msg);
            document.getElementById("message").innerHTML = msg;
        });
    }
    return (<div>
        Some data
        <div id="message"></div>
    </div>)
}
export default Chat;

---

您应该从npm导入socket.io，而不是在React中使用脚本标记。代码可以这样添加

import io from "socket.io";

const Chat = props => {
  React.useEffect(() => {
    let socket = io();

    socket.on('message', function(msg) {
      console.log(msg);
      document.getElementById('message').innerHTML = msg;
    });
  }, []);

  return <div></div>;
};

---

该效果只需运行一次套接字设置代码。所以依赖关系数组应该设置为[]。否则，此代码将在每次渲染时运行。@谢谢。那么，这个链接应该在哪里呢？@Sohail好的，我使用了你的代码，运行了服务器，但我在控制台中遇到了以下错误：加载资源失败：net:：ERR\u NAME\u未解析并轮询xhr.js:267 GET http://%3Csocket%20url%3E/socket.io/？EIO=3&transport=polling&t=n38net:：ERR\u NAME\u未解析_RESOLVED@Sohail使用的var套接字=io'；我没有IDE，我应该在这里使用哪个URL。我不断得到错误：轮询xhr.js:267 POST 404 Not FoundLet我们。