ReactJS渲染多个孩子

我非常新ReactJS，我试图用它来作一个简单的健身web应用程序。目前，如果我是这样做使用JQuery，我将结束了千行中的单个文件，这不是我想要的，所以我想在尽可能获得尽可能多的外部化，同时保持一个HTML文件。前提是当用户点击该页面时，“Main”类将呈现在屏幕上。当他们按下其中一个视频图像时，DOM将取消该主视图并将其替换为链接到该视频的特定页面。正如事情站起来，我试图创建大型的完整的HTML类来呈现每一次，它抛出一个简单的错误，我不明白足以修复。你能向我解释我做错了什么吗？ReactJS渲染多个孩子

的Index.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 /> 
);

到有用的文档的任何链接也大加赞赏，我跟着这个文件似乎已导致我在到目前为止麻烦。

来源

2015-10-16 CSafari

您当前的问题有两个方面，第一关标准的HTML属性，并不总是使用中反应。例如，class是className，forhtmlFor是。请参阅here哪些属性受支持。

其次，需要作出反应，返回这就是为什么你没有看到屏幕上的任何东西，得到错误的单个DOM节点：Adjacent XJS elements must be wrapped in an enclosing tag。

如果你换，你目前在你的渲染功能的div标签内，你将有更多的运气整个HTML！

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

来源

2015-10-16 10:56:20

除了@limelights回答：
第三，你<body>是空的。尝试添加如下内容：

<body> 
    <div id="react-container"></div> 
</body>

第四，您的ReactDOM.render（）需要DOM中的一个目标来放置您的组件。（文档here）E.g：

ReactDOM.render(
    <Main />, 
document.getElementByID("react-container") 
);

至于你提到的一般文档方面的疑问，反应自己的教程（here）是一个很好的起点。

来源

2015-10-16 11:02:02 wintvelt

有趣;你首先：“第三”！ – Pogrindis

;）添加到以前的答案（作出编辑澄清） – wintvelt

ReactJS渲染多个孩子

回答

相关问题