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

【问题标题】：How to put JS code inside React component如何将 JS 代码放入 React 组件中
【发布时间】：2020-06-23 04:00:33
【问题描述】：

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

我的组件.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>

【问题讨论】：

标签： javascript reactjs sockets components

【解决方案1】：

您可以将代码包装在 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;

【讨论】：

效果只需要运行一次（是socket设置代码）。所以依赖数组应该设置为[]。否则，此代码将在每次渲染上运行。
@Sohail 谢谢。还有怎么样，这个链接应该在哪里？
@Sohail 好吧，我使用了你的代码，运行了服务器，但我在控制台中收到了这些错误：“无法加载资源：net::ERR_NAME_NOT_RESOLVED”和“polling-xhr.js: 267 GET http://%3Csocket%20url%3E/socket.io/?EIO=3&transport=polling&t=N38iOwA net::ERR_NAME_NOT_RESOLVED"
@Sohail used var socket = io('localhost:3000');我不知道我应该在这里使用哪个 URL。我不断收到错误：polling-xhr.js:267 POST localhost:3000/socket.io/… 404 (Not Found)
让我们continue this discussion in chat.

【解决方案2】：

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

【讨论】：