我是新來的反應。我創建了一個使用外部庫而不使用npm的演示項目。但是,當我出口的一類,它顯示了錯誤exports is not defined
文件導出logout
類時發生未定義的錯誤,導出類時
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/login.css">
<!-- SCRIPTS Starts -->
<!-- EXTERNALS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"> </script> <!-- 1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom-server.min.js"></script> <!-- 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script> <!-- 3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> <!-- 4 -->
<script src="https://unpkg.com/[email protected]/umd/ReactRouter.js"></script> <!-- 5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"> </script> <!-- 6 -->
<!-- EXTERNALS -->
<script src="http://192.168.1.64:5011/js/dependencies/sails.io.js"></script>
<script src="js/config.js"></script>
<!-- Components -->
<!-- <script type="text/babel" src="js/components/loginComponent.js"> </script> -->
<script type="text/babel" src="js/components/logoutComponent.js"></script>
<script type="text/babel" src="js/components/indexComponent.js"></script>
<!-- <script type="text/babel" src="react-2.js"></script> -->
<!-- SCRIPTS Ends -->
</head>
<body>
<div id="chat-react-app-index"></div>
</body>
</html>
logout.js
錯誤。
console.log("Logout component >>>>>>>>>>>>>>>>>>>>");
export default class Logout extends React.Component {
constructor(props) {
super(props);
//this.props.gender = this.state.gender;
//this.handleInputChange = this.handleInputChange.bind(this);
this.logoutClick = this.logoutClick.bind(this);
//this.props.logouts = this.props.logouts.bind(this);
console.log("this.props.loginslogouts");
console.log(this.props.loginslogouts);
}
logoutClick() {
console.log("logoutClick ============>>>..");
this.props.loginslogouts(true, false);
var userName = JSON.parse(localStorage.getItem('userData')).username;
var userId = JSON.parse(localStorage.getItem('userData')).userId;
var userToken = JSON.parse(localStorage.getItem('userData') ).userToken;
var userProfilePic = JSON.parse(localStorage.getItem('userData') ).userProfilePic;
io.socket.request({
method: 'POST',
url: '/user/logout',
data: {
userId : userId,
},
headers: {
'userToken':userToken
}
}, function (resData, jwres) {
//this.setState({logout: false});
console.log("Logout response -------- >>>>>>............");
console.log(resData);
if (resData.status == 1) {
console.log("Logout Success");
localStorage.removeItem("userData");
}
});
}
render() {
return (
<div id="logoutClick" onClick = {this.logoutClick} className="row">
<a className="btn btn-primary">LOGOUT</a>
</div>
)
}
}
index.js
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var Link = ReactRouter.Link;
var browserHistory = ReactRouter.browserHistory;
console.log("Index component >>>>>>>>>>>>>>>>>>>>");
//import React, { Component } from 'react';
//require('loginComponent');
import Logout from './logoutComponent.js'
class Index extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Logout/>
INDEX
</div>
)
}
}
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={Index} />
<Route path="/index" component={Index} />
<Route path="*" component={Index} />
</Router>,
document.getElementById('chat-react-app-index')
);
你在哪裏進口 「logout.js」 或者是 「 /logout.js」''你退出進口?你的'ReactDOM.render(...)'在哪裏? –
EatYaFood