我正在使用reactJS创建我的第一个应用程序,但我一直收到此错误:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM element) or a ReactClass (for composite components). Check the render method of 'App'
我已经阅读了十几个问题,但没有一个能帮助我解决这个问题.这是我的文件:
我的app.js文件:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Header } from './components/common';
import { ChooseLevel } from './components/ChooseLevel';
class App extends Component {
renderContent() {
<ChooseLevel/>
}
render() {
return (
<View>
<Header headerText="my app" /> …如何根据React Native中的条件渲染元素？
这是我尝试的方式:
render() {
return (
<Text>amount is: {this.state.amount}</Text> // it correctly prints amount value
</Button>
{this.state.amount} >= 85 ? <button>FIRST</button> : <button>SECOND</button>
<Text>some text</Text>
);
}
但是会出现此错误消息:
Expected a component class, got [object Object]
我会直截了当地说.这是我在ReactJS应用程序中的组件:
class BooksList extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
e.preventDefault();
console.log("The link was clicked");
}
render() {
return (
<div>
<a className="btn btn-success" onClick={handleClick}>
Add to cart
</a>
</div>
);
}
}
为什么在加载组件时会出现以下错误？
Uncaught ReferenceError: handleClick is not defined
编辑:
你回答后我改变了我的代码:
handleClick(e) {
e.preventDefault();
console.log("Item added to the cart");
}
renderBooks(){
return this.props.myBooks.data.map(function(book){
return (
<div className="row">
<table className="table-responsive">
<tbody>
<tr>
<td>
<p className="bookTitle">{book.title}</p>
</td>
</tr>
<tr>
<td>
<button value={book._id} onClick={this.handleClick}>Add to cart</button>
</td> …如何检索套接字所属的房间？我正在使用 socket.io 1.4 版
我尝试过，this.socket.adapter.rooms但在 chrome 控制台中收到此错误：Cannot read property 'rooms' of undefined
在我的客户端代码中，我有这个方法：
send(msg) {
if(msg != ''){
var clientInfo = [];
clientInfo.push(msg);
clientInfo.push(socket.id);
clientInfo.push(this.socket.adapter.rooms);
socket.emit('message', clientInfo);
}
}
在我的服务器端：
socket.on('message', function(clientInfo){
var clientmessage = clientInfo[0];
var clientid = clientInfo[1];
var clientroom = clientInfo[2];
io.to(clientroom).emit('messageSent', clientmessage);
});
我正在尝试创建一个聊天系统，用户可以在其中向所有人发送消息（并且此消息显示在 ID 为“chat”的 div 中），并且我已经实现了此功能。现在我想实现一个私人聊天。用户可以单击右侧列（显示所有登录用户）上的另一个用户名，一旦他单击用户名，就会出现一个小窗口（类为“chatpopup”的 div），在此窗口中有一个提交按钮和一个要填充消息的输入文本，单击提交按钮后，应将消息发送给其他用户。
这就是我所拥有的，如果我单击用户（在屏幕右侧），则会显示小窗口（chatpopup），但是当我尝试在这个小窗口内提交表单时，应用程序崩溃。我还想收到一些关于建立私人聊天的提示，例如如何在应该接收消息的用户的客户端打开一个新窗口（带有消息接收）？
索引.html
<html>
<head>
<title>Chat with socket.io and node.js</title>
<style>
#contentWrap
{
width:100%;
display: none;
}
#chatWrap {float: left; width:80%;}
#chat
{
height:500px;
width:96%;
border: 1px #000 solid;
padding-left:2%;
padding-right:2%;
}
#users
{
margin-left:82%; width:15%;
height:500px;
border: 1px #000 solid;
text-align:right;
}
#send-message {margin-top:3%; width:100%;}
#message {width:80%;}
.err1r{ padding-top:1%;
color: red;
}
.whisper{
color: gray;
font-style: italic;
}
p.sideusername:nth-child(even) {background-color:#FAFAFA; padding-bottom:5%; padding-top:5%;}
p.sideusername:nth-child(odd) {background-color: #f5f5f0; padding-bottom:5%; padding-top:5%;}
.chatpopup {width:350px; height: 250px; background-color:blue;}
#interlocutore {background-color:red; …