如何将jQuery代码转换为reactjs

Question

AM建设有和的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);
});

这里是我stucked：

剩下转换为reactjs是代码按下面的如果功能部

   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渲染功能。

请我怎么做到的，如果部分与下面的代码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 };

Answer 1

作为DUC脉评论，#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>
          )
}

}
        })}