0
하나의 메뉴 버튼과 팝업되어야하는 모달이있는 간단한 페이지로 반응 부트 스트랩을 시험하고 있습니다. 이 오류는 반응 코드와 반응 부트 스트랩 코드에 상당히 깊습니다.랜더링하지 않는 최소 반응 부트 스트랩 페이지에서 첫 번째 시도
오류 :
Uncaught Error: Invalid Argument Type, must only provide functions, undefined, or null.(anonymous function)
@ createChainedFunction.js:15n
@ createChainedFunction.js:13t.render
@ NavItem.js:67_renderValidatedComponentWithoutOwnerOrContext
@ react.min.js:13_renderValidatedComponent
....
@ react.min.js:14render
@ react.min.js:14(anonymous function)
@ reactcs.js:102transform.run
@ browser.min.js:4exec
@ browser.min.js:4(anonymous function)
@ browser.min.js:4xhr.onreadystatechange
@ browser.min.js:4.
여기 여기 내 html로
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Example site">
<meta name="keywords"
content="score, swift">
<title>Example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../app/css/csreact.css"/>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
ReactDOM.render(
<HomePage />,
document.getElementById('container')
);
</script>
<!-- =============== PAGE VENDOR SCRIPTS ===============-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.0/react-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</script>
<!-- =============== APP SCRIPTS ===============-->
<script src="js/reactcs.js"></script>
<script src="js/js4k.js"></script>
</body>
</html>
입니다 위의 코드는 소리가 있지만 자바 스크립트
'use strict';
/**
*
*/
var Nav = ReactBootstrap.Nav;
var Navbar = ReactBootstrap.Navbar;
var NavItem = ReactBootstrap.NavItem;
var Modal = ReactBootstrap.Modal;
var Form = ReactBootstrap.Form;
var FormControl = ReactBootstrap.FormControl;
var FormGroup = ReactBootstrap.FormGroup;
var ControlLabel = ReactBootstrap.ControlLabel;
var Button = ReactBootstrap.Button;
var HomePage = React.createClass({
openLogin: function() {
ReactDOM.render(LoginModal, document.getElementById('container'));
},
render: function() {
return (
<div>
<Navbar inverse>
<Navbar.Header>
<Navbar.Brand>
<a href="#">Server API example</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} onClick="openLogin">Login</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
});
var LoginModal = React.createClass({
login: function (username, password) {
console.log("Call login");
var errCB = function(err) {
console.error(err);
};
jsk.connect("ws://localhost:8080/ws", "WS", errCB).then(function(app, error) {
if (!app) {
console.log("connection failure");
console.error(error);
}
server = app;
server.ask("login", username.value, password.value).then(function(mySession, err) {
if (err) {
console.log(err);
} else {
console.log("logged in");
aSession = mySession;
var loggedin = "<p>Login successful</p>";
document.getElementById("status").innerHTML = loggedin;
}
});
});
},
render: function() {
return (
<div>
<Modal.Dialog>
<Modal.Header closeButton>
<Modal.Title>Login</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form horizontal>
<FormGroup controlId="formControlsEmail">
<ControlLabel>Email address</ControlLabel>
<FormControl type="email" placeholder="Login (email)" />
</FormGroup>
<FormGroup controlId="formControlsPassword">
<ControlLabel>Password</ControlLabel>
<FormControl type="password" />
</FormGroup>
<Button type="submit">
Login
</Button>
</Form>
</Modal.Body>
</Modal.Dialog>
</div>
);
}
});
ReactDOM.render(
<HomePage />,
document.getElementById('container')
);