Question

我是reactjs的新手。我正在玩多个组件来创建表单，但是遇到了一个我无法解决的错误。我彻底搜查了，但找不到答案。请帮忙

错误如下：

TypeError：在JSXTransformer-0.12.2.js中未定义erroneousLine ReferenceError：未定义Login JSXTransformer-0.12.2.js：

login.jsx

 var Login = React.createClass({
        render: function () {
            return (
                <div className="container"><h2>Library</h2>
              <form role="form" action="first.ejs">
                <textField/>
                <div className="form-group">
                    <label for="email">UserId:</label>
                    <input type="email" className="form-control" id="email" placeholder="Enter email"/>
                </div>
                <div className="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" className="form-control" id="pwd" placeholder="Enter password" />
                </div>
                <div className="checkbox">
                    <label><input type="checkbox"/> Remember me</label>
                </div>
                <button type="submit" className="btn btn-default">Submit</button>
              </form></div>


            );
        }
    });

text_field.jsx

var textField=React.createClass({
    render: function(){
        return (<input type="text" name="username"/>);
    }
});

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx" src="src/text_field.jsx"></script>
<script type="text/jsx" src="src/login.jsx"></script>
<script type="text/jsx">
React.render(<Login/>, document.body);
</script>

</body>
</html>

Answer 1

您上一个脚本标记中有拼写错误。类型应该是javascript，而不是jsx。

<script type="text/javascript">
React.render(<Login/>, document.body);
</script>

在ReactJS中运行多个组件时出错

1 个答案: