我对 ReactJS 非常陌生，我正在尝试使用它来制作一个简单的健身网络应用程序。目前，如果我使用 JQuery 执行此操作，我最终会在一个文件中得到一千行，这不是我想要的，所以我试图在保留一个 html 文件的同时获得尽可能多的外部化。前提是当用户点击页面时，“Main”类将被渲染到屏幕上。当他们按下其中一个视频图像时，DOM 将取消渲染主图像并将其替换为链接到视频的特定页面。就目前情况而言，我试图创建充满 html 的大型类来每次渲染，并且它抛出一个简单的错误，我不太理解该错误来修复。你能向我解释一下我做错了什么吗？
索引.html
<!DOCTYPE html>
<html>
<head>
<title> Get Fit </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500' rel='stylesheet' type='text/css'>
<link href = "css/styles.css" rel = "stylesheet">
<script type = "text/javascript" src = "js/male.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("button").removeClass("active");
$(this).addClass("active");
});
});
</script>
</head>
<body>
</body>
</html>
Male.js
var Main = React.createClass({
render: function() {
return (
<div class = "header">
<img class = "img-responsive" src = "assets/header.png" alt = "header" />
</div>
<div class = "content">
<div class = "genderSelection">
<h1 class = "title"> YOUR WORKOUT PLAN </h1>
<button id = "male"> Male </button>
<button id = "female"> Female </button>
</div>
<div class = "dayContainer">
<h2 class = "workoutDay"> Monday </h2>
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-1" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-2" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-3" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-4" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-5" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-6" />
</div>
</div>
<div class = "footer">
</div>
);
}
});
var MaleMonday1 = React.createClass({
render: function() {
return (
);
}
});
ReactDOM.render(
<Main />
);
任何指向有用文档的链接也非常感谢，我为此遵循的文档到目前为止似乎给我带来了麻烦。
最佳答案
您当前的问题有两个方面，首先标准 HTML 属性并不总是在 React 中使用。例如，class 是className，for 是htmlFor。请参阅here支持哪些属性。
其次，React 需要返回单个 DOM 节点，这就是为什么您在屏幕上看不到任何内容并收到错误:相邻的 XJS 元素必须包含在封闭标记中。
如果您将渲染函数中当前的整个 HTML 包装在 div 标记内，您将会更加幸运!
render: function() {
return (
<div>
<div className = "header">
</div>
<div className="content">
<div className= "genderSelection">
</div>
<div className = "dayContainer">
</div>
</div>
<div className="footer">
</div>
</div>
);
}
关于javascript - ReactJS 渲染多个子项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33168494/