使用 react.js，我没有收到任何错误，但内容未加载

Question

我目前以自由职业者的身份在一个网站上工作，客户要求通过 react.js 进行表单验证。我以前从未使用过它，所以我正在努力学习，当然，我的首要目标是获取页面上的内容。经过一些摆弄并发现了我的错误，我终于没有收到任何错误，但页面上没有加载内容。我也在使用 bootstrap。文件结构全部正确。

这是我的 HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Site Name</title>

<!-- Bootstrap -->
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">

</head>

<body>
<header>
    <nav class="navbar navbar-defualt dc-navbar navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle dc-navbutton collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">
                        Toggle navigation
                    </span>
                    <span class="toggle-bar icon-bar"></span>
                    <span class="toggle-bar icon-bar"></span>
                    <span class="toggle-bar icon-bar"></span>
                </button>
                <a class="navbar-brand unfloat" href="#">
                    <img id="logo" src="img/Service2Rev2.png" alt="DockChain">
                </a>
            </div>
            <div id="navbar" class="dc-navbar collapse navbar-collapse">
                <ul class="fnt-sec nav-pad nav navbar-nav navbar-left">
                    <li class="active">
                        <a href="#">
                            Home
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Settings
                        </a>
                    </li>
                    <li>
                        <a href="#"> 
                            About
                        </a>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>
</header>

<section>
    <div class="container-fluid">
        <div class="main jumbotron">
            <center class="fnt-secondary">
                <h1>Client's Service</h1>
                <p>Lorem Ipsum Dolor</p>
                <a href="#">
                    <button class="btn btn-default">Learn More</button>
                </a>
            </center>
        </div>
    </div>
</section>

<section class="sections">
    <div class="container">
        <div class="center row">
            <div class="col-sm-4">
                <h2>Safe</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
            </div>
            <div class="col-sm-4">
                <h2>Secure</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
            </div>
            <div class="col-sm-4">
                <h2>Verified</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
            </div>
        </div>
    </div>
</section>

<section class="sections info-section">
    <div class="container">
        <div class="some-room row">
            <div class="col-md-6">
                <img class="center" src="img/Service3.png" alt="flow chart">
            </div>
            <div class="info-text col-md-6">
                <h2>This is how we work</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit. Aenean in enim at est porttitor vestibulum eu quis ipsum. Morbi ac tortor tempus, pulvinar nisi at, sodales urna. In facilisis ut diam vel aliquam. Mauris tempor, nulla non hendrerit rhoncus, leo diam dictum elit, nec molestie ex arcu ac erat. Vivamus malesuada libero eget erat bibendum rutrum. Nunc tempus posuere ornare. Sed eleifend, nisl non ultricies pretium, elit diam dictum orci, in aliquet nisi neque luctus lacus. </p>
            </div>
        </div>
    </div>
</section>

<div id="formDiv">

</div>

<section>
    <div class="container-fluid">
        <div class="main jumbotron">
            <center>
                <h1>Here's another focal point</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. </p>
                <a href="#">
                    <button class="btn btn-default">Call to Action</button>
                </a>
            </center>
        </div>
    </div>
</section>

<footer class="footer">
    <div class="container">
        <div class="fnt-sec pull-left">
            <p><i class="fa fa-copyright"></i> 2015 Client</p>
        </div>
        <div class="fnt-sec pull-right">
            <p>You can have some stuff here too.</p>
        </div>
    </div>
</footer>

<script src="js/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- React.js -->
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>

<!-- Form jsx -->
<script src="comp/Form.jsx" type="text/jsx"></script>
<script type="text/jsx">
    var form = React.createElement(Form);
    function run() {
        React.render(form, document.getElementById('formDiv'));
    }

    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', run);
    } else {
        window.attachEvent('onload', run);
    }

</script>
</body>

</html>

这里是 Form.jsx：

var Form = React.createClass({
render: function () {
    return(
        <div className="container form-border">
        <h2>Enter your info to subscribe.</h2>
        <form>
            <div classNameName="form-group has-success has-feedback">
                <label className="control-label" for="name">Name</label>
                <input type="text" className="form-control" id="nameInput" placeholder="Name" />
                <span className="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div className="form-group has-warning has-feedback">
                <label className="control-label" for="emailInput">Email address</label>
                <input type="email" className="form-control" id="emailInput" placeholder="Enter email" />
                <span className="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
            <div className="form-group has-error has-feedback">
                <label className="control-label" for="passInput">Password</label>
                <input type="password" className="form-control" id="passInput" placeholder="Password" />
                <span className="glyphicon glyphicon-remove form-control-feedback"></span>
            </div>
            <div className="form-group">
                <label for="comments">Comments</label>
                <textarea className="form-control" id="commentInput" rows="3" placeholder="Enter comments here"></textarea>
            </div>
            <div className="row">
                <div className="col-xs-6">
                    <div className="form-group">
                        <div className="checkbox-inline">
                            <label>
                                <input type="checkbox" value="" checked /> Option one
                            </label>
                        </div>
                        <div className="checkbox-inline">
                            <label>
                                <input type="checkbox" value="" />Option two
                            </label>
                        </div>
                        <div className="checkbox disabled">
                            <label>
                                <input type="checkbox" value="" disabled /> Option three (disabled)
                            </label>
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="radio-inline">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked />Option one
                            </label>
                        </div>
                        <div className="radio-inline">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />Option two
                            </label>
                        </div>
                        <div className="radio disabled">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled /> Option three (disabled)
                            </label>
                        </div>
                    </div>
                </div>
                <div className="col-xs-6">
                   <div className="form-group">
                   <label for="jobForm">How would you describe yourself?</label>
                    <select name="profession" id="profession" className="form-control">
                        <option value="default">Select an option...</option>
                        <option value="developer">Developer</option>
                        <option value="designer">Designer</option>
                        <option value="director">Director/Manager</option>
                        <option value="joke">Puppet Maker</option>
                    </select>
                    </div>
                    <div className="form-group">
                        <label for="useForm">How will you be using this service?</label>
                        <select name="use" id="use" className="form-control" multiple>
                            <option value="personal">Personal</option>
                            <option value="production">Production</option>
                            <option value="corporate">Corporate</option>
                            <option value="joke">With gusto</option>
                        </select>
                    </div>
                </div>
            </div>
            <button type="submit" className="center btn btn-default">Submit</button>
        </form>
    </div>
        );        
  }
});

我删除了文件名中对客户服务的引用，headers 出于保密考虑。我找不到为什么它没有加载。谁能看到我看不到的东西？

Answer 1

您不需要事件加载器或对 createElement 的调用。试试这个：

<script type="text/jsx">

    React.render(<Form />, document.getElementById('formDiv'));

</script>

使用 react.js，我没有收到任何错误，但内容未加载

Using react.js, I receive no errors, but content doesn't load

javascript

twitter-bootstrap

reactjs