我正在使用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 };
型
1条答案
按热度按时间hjqgdpho1#
正如duc mai评论的那样,#form和#message属性在css文件中按照下面的代码实现
字符串
所以我必须按照Matt Kuhns先生的建议将其设置为阻止。
最后,下面的代码是什么为我工作
型