如何将jQuery代码转换为Reactjs

bgibtngc  于 12个月前  发布在  jQuery
关注(0)|答案(1)|浏览(215)

我正在使用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在render函数中打印结果。
如何用下面的代码实现Reactjs的if部分?

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 };

hjqgdpho

hjqgdpho1#

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

#form, #messages { display: none; }

字符串
所以我必须按照Matt Kuhns先生的建议将其设置为阻止。
最后,下面的代码是什么为我工作

{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>
          )
}

}
        })}

相关问题