我目前正在自由职业网站上工作，客户端正在通过react.js请求表单验证。我之前从未使用它，所以我正在努力学习，当然，我的第一个目标是在页面上获取内容。经过一番摆弄，发现我的错误，我终于没有收到任何错误，但内容没有加载到页面上。我也在使用bootstrap。文件结构都是正确的。
这是我的HTML：
(with-output-to-file "test.txt" (lambda () (displayln "world")) #t)
这是Form.jsx：
<!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>
我在文件名和标题中删除了对客户端服务的引用以保密。我找不到为什么它没有加载。任何人都可以看到我不能做的事情吗？
答案 0 :(得分：1)
您不应该需要事件加载器或对createElement的调用。试试这个：
<script type="text/jsx">
React.render(<Form />, document.getElementById('formDiv'));
</script>