Javascript ReactJS呈现多个子对象_Javascript_Reactjs

Javascript ReactJS呈现多个子对象

javascript reactjs

Javascript ReactJS呈现多个子对象,javascript,reactjs,Javascript,Reactjs,我对ReactJS非常陌生，正在尝试使用它来制作一个简单的健身web应用程序。目前，如果我使用JQuery来实现这一点，我会在一个文件中包含1000行，这不是我想要的，所以我试图在保留一个html文件的同时尽可能多地实现外部化。前提是当用户点击页面时，“Main”类将呈现在屏幕上。当他们按下其中一个视频图像时，DOM将取消隐藏主图像，并将其替换为链接到视频的特定页面。就目前的情况而言，我试图创建一个大型类，每次都要呈现一个html，它抛出了一个简单的错误，我对此理解不够，无法修复。你能解释一下我

我对ReactJS非常陌生，正在尝试使用它来制作一个简单的健身web应用程序。目前，如果我使用JQuery来实现这一点，我会在一个文件中包含1000行，这不是我想要的，所以我试图在保留一个html文件的同时尽可能多地实现外部化。前提是当用户点击页面时，“Main”类将呈现在屏幕上。当他们按下其中一个视频图像时，DOM将取消隐藏主图像，并将其替换为链接到视频的特定页面。就目前的情况而言，我试图创建一个大型类，每次都要呈现一个html，它抛出了一个简单的错误，我对此理解不够，无法修复。你能解释一下我做错了什么吗

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>

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


健身
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“按钮”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
});

Male.js

<!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>

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

var Main=React.createClass({
render:function（）{
返回(
你的锻炼计划
男性
女性
星期一
);
}
});
var MaleMonday1=React.createClass({
render:function（）{
返回(
);
}
});
ReactDOM.render(
);

我们也非常感谢与有用文档的任何链接，我为此遵循的文档到目前为止似乎给我带来了麻烦。

您当前的问题有两个方面，第一步标准HTML属性并不总是在React中使用。例如，

class

是

className

，

For

是

htmlFor

。查看支持哪些属性

其次，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>
    );
  }

render:function（）{
返回(
);
}
除了@limelights答案：

第三，你的
是空的。尝试添加以下内容：
<body>
  <div id="react-container"></div>
</body>



第四，ReactDOM.render（）需要DOM中的目标来放置组件。（文件）例如：
ReactDOM.render(
,
document.getElementByID（“react容器”）
);

关于一般文档的问题，react自己的教程（）是一个很好的起点。
有趣的是；你从“第三”开始！