我是React.js的新手。我正在制作一个小型应用程序，其中包含身份验证和一些组件。我将应用程序划分为一些组件。首先是App.jsx：
var React = require('react');
var ReactDOM = require('react-dom');
var Login = require('./Login.jsx');
var App = React.createClass({
getInitialState: function() {
return {
url: 'url-to-my-API'
};
},
render: function() {
if (typeof localStorage !== 'undefined') {
return (
<Login url={this.state.url} />
)
} else {
alert('Browser is not supported. Browser must support localStorage.')
return (
<div />
)
}
}});
module.exports = App;
Login.jsx组件由用于授权用户的表单和为用户加载新组件的提交按钮组成。该组件由菜单和注销按钮组成。当用户单击以注销按钮时，Logout.jsx组件会有onClick事件。Logout.jsx看起来像这样：
var React = require('react');
var ReactDOM = require('react-dom');
var Login = require('./Login.jsx');
var Logout = React.createClass({
getInitialState: function() {
return {
url: this.props.url,
login: false
}
},
logout: function(e) {
localStorage.setItem('username', '');
localStorage.setItem('token', '');
this.backToLoginPage();
document.getElementById('appContent').innerHTML = '';
},
backToLoginPage: function() {
this.setState({
login: true
});
},
componentDidUpdate: function() {
if (this.state.login) {
ReactDOM.render(<Login url={localStorage.getItem('url')} />, document.getElementById('appLogin'));
}
},
render: function() {
if (this.state.login) {
return (
<span />
)
} else {
return (
<button name="logout" className="logoutButton btn primary" onClick={this.logout}>Logout</button>
)
}
}});
module.exports = Logout;
如果用户单击注销按钮，它将返回以下内容：
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
您能帮我解决我在做什么错吗？
非常感谢。
当我从中更改组件的语法时：
var React = require('react');
var ReactDOM = require('react-dom');
var Login = require('./Login.jsx');
var Logout = React.createClass({ ...
对此：
import React, { Component } from 'react';
import RectDOM from 'react-dom';
import Login from './Login';
export default class Logout extends React.Component { ...
现在正在工作。
因为是ES6，所以我不得不更改初始状态的函数（更改为Constructor（））并绑定每个动作事件。
也许它可以帮助某人。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句