如何将jquery代码转换为reactjs答案

【问题标题】：How to convert jquery codes to reactjs如何将jquery代码转换为reactjs
【发布时间】：2019-06-28 17:25:49
【问题描述】：

正在使用 Nodejs 和 reactjs 构建应用程序。

我有一个 Jquery 代码，我想将其转换为 Reactjs，但在某些地方卡住了

以下是从 nodejs 后端获取数据的 Jquery 代码，它工作正常

//Update and get list of online users

socket.on('onlineUsers', function (onlineUsers) {
  var usersList = '';

  onlineUsers.forEach(function (user) {
    if (user.id != myUser.id) {

      if (onlineUsers.length == 2) {
        myFriend.id = user.id;
        myFriend.name = user.name;
        $('#form').show();
        $('#messages').show();
      }

      var activeClass = (user.id == myFriend.id) ? 'active' : '';
      usersList += '<li id="' + user.id + '" class="' + activeClass + '" onclick="selectUerChatBox(this, \'' + user.id + '\', \'' + user.name + '\')"><a href="javascript:void(0)">' + user.name + '</a><label class="chatNotificationCount"> Good Job</label></li>';
    }
  });
  $('#onlineUsers').html(usersList);
});

这是卡住的地方：

剩下要转换成reactjs的是下面代码的if函数部分

   if (user.id != myUser.id) {
          if (onlineUsers.length == 2) {
            myFriend.id = user.id;
            myFriend.name = user.name;
            $('#form').show();
            $('#messages').show();
          }

          var activeClass = (user.id == myFriend.id) ? 'active' : '';
          usersList += '<li id="' + user.id + '" class="' + activeClass + '" onclick="selectUerChatBox(this, \'' + user.id + '\', \'' + user.name + '\')"><a href="javascript:void(0)">' + user.name + '</a></li>';


}

我所取得的成就

这是迄今为止我使用 reactjs 所取得的成就。我可以通过 Reactjs 在渲染函数中打印结果。

请问如何使用下面的代码实现 if 部分到 reactjs

import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import axios from 'axios';
import io from "socket.io-client";


class ChatReact extends React.Component {
  constructor(props) {
    super(props);

 this.state = {
getUsers: [],
myUser: {},
myFriend: {};
};

 this.loginNow = this.loginNow.bind(this);

this.socket = io('http://localhost:8080');

var myUser= {};
var myFriend = {};



// Get current user information

this.socket.on('newUser', (newUser) => {
  const myUser = newUser.name;
 //this.setState({myName: myUser.name});
this.setState({myName: newUser.name});

});


// Update and get list of online users
        this.socket.on('onlineUsers', function(onlineUsers){
            var usersList = '';
            addonlineUsers(onlineUsers);
        });

        const addonlineUsers = onlineUsers => {
            console.log(onlineUsers);
            alert(onlineUsers);
            this.setState({getUsers: onlineUsers});
            console.log(this.state.getUsers);
        };
}

// Function to ask user to supply his/her name before entering a chatbox
loginNow() {
  var person = prompt("Please enter your name:", "Nancy Moore");

    this.socket.emit('newUser', person);

}

  render() {
    return (
      <div >
        <div>


<h1> Testing Socket Io with Reactjs</h1>


<button onClick={this.loginMe} className="btn btn-basic form-control">login</button>

<br />
 <div >

{this.state.getUsers.map((user) => {

          return (
            <div key={user.id}>
              <div>


{user.id}------------- {user.name}
<br />

</div>

              </div>
          )
        })}
                                </div>

        </div>

      </div>
    );
  }
}

export { ChatReact };

【问题讨论】：

也许您可以重新格式化您的代码，以便更容易查看您的组件代码。我也没有在你的反应代码中看到你的 #form 和 #message
我相信将 jQuery 集成到 React 需要一些设置：reactjs.org/docs/integrating-with-other-libraries.html。你有没有想过使用标准的 javascript 选择器：document.getElementById("form").display = "block"

标签： jquery node.js reactjs

【解决方案1】：

正如 duc mai 所评论的，#form 和 #message 属性是按照下面的代码在 css 文件中实现的

#form, #messages { display: none; }

所以我必须将其设置为阻止 先生。马特库恩斯建议。

最后，下面的代码对我有用

{this.state.getUsers.map(user => {

if (user.id != 2) {
if (this.state.getUsers.length > 1) {
          const myFriend_id = user.id;
          const myFriend_name = user.name;

          return (
            <div key={user.id}>

<div>

<div>

<li onClick={ () => this.selectUerChatBox(this, user.id, user.name)}>
 {user.name}
</li>
<br />
</div>
</div>

              </div>
          )
}

}
        })}

【讨论】：