如何将jQuery代码转换为React.js

Question

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

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

下面是从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 };

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

}
        })}