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 구성 요소가 권한 부여 사용자 양식을 구성하고 사용자에 대한 새 구성 요소를로드 버튼을 제출합니다. 이 구성 요소는 메뉴 및 로그 아웃 버튼으로 구성됩니다. 사용자가 로그 아웃 버튼을 클릭하면 logout.jsx 구성 요소에 onClick 이벤트가 발생합니다. Logout.jsx은 다음과 같습니다

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({ 
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; 

경우?

정말 고마워요.

Answer 1

0 나는이에서 내 구성 요소의 구문을 변경하면이에

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이기 때문에 초기 상태 (생성자())의 기능을 변경하고 모든 액션 이벤트를 바인딩해야했습니다.

어쩌면 누군가를 도울 수 있습니다.

Answer 2

이 donot componentdidUpdate에 렌더링하려고

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

이

올바른 방법은 어쩌면, 앱 JS 확인 module.exports에서 렌더링 함수에서

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 3

그것을 처리하는 잘못 그것은이어야한다 module.exports = App , rather than Login 그리고 경로를 확인 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;