2016-07-26 10 views
0

私は1つのメニューボタンとポップアップするモーダルを持つ単純なページで反応起動ストラップを試しています。このエラーは、反応コードと反応ブートストラップコードのかなり深いものです。レンダリングされていない最小反応ブートストラップページでの最初の試み

エラーは次のとおりです。

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> 

であること上記のコードは音がjavascriptの

'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') 
); 

答えて

0

です。あなたはReact createClassまたはComponentが見つからないようです。

関連する問題