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

Posted 2023-02-23

【中文标题】如何将 JS 代码放入 React 组件中

【英文标题】：How to put JS code inside React component

【发布时间】：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>

【参考方案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>;
;