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

Question

我有一个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>

Answer 1

您应该从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>;
};

Answer 2

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

您必须从sockito.io安装npm。运行> 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;