在React.js中导出/导入组件

Question

我是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组件包括用于授权用户的表单和用于为用户加载新组件的提交按钮。 该组件由菜单和注销按钮组成。 当用户单击注销按钮时，有一个onClick事件到Logout.jsx组件。 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.

你能帮我解决这个问题吗？

非常感谢。

Answer 1

Donot尝试在componentdidUpdate中渲染

componentDidUpdate: function() {
    if (this.state.login) {
        ReactDOM.render(<Login url={localStorage.getItem('url')} />, document.getElementById('appLogin'));
    }
},

这是不正确的

正确的方法是在渲染功能中处理它

render: function() {
    if (this.state.login) {
        return (
            <Login url={localStorage.getItem('url')} />
            )
    } else {

    return (
        <button name="logout" className="logoutButton btn primary" onClick={this.logout}>Logout</button>
        )
}

Answer 2

在App js中检查module.exports，也许它应该是module.exports = App , rather than Login并检查var Login = require('./Login.jsx');路径var Login = require('./Login.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;

Answer 3

当我从这里改变我的组件的语法时：

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（））并绑定每个动作事件。

也许它有助于某人。