Question

我对ReactJS非常陌生，我正试图用它来制作一个简单的健身网络应用程序。目前，如果我要使用JQuery做到这一点，我最终会在一个文件中找到一千行，这不是我想要的，所以我试图在尽可能多的时候进行外部化。保留一个html文件。前提是当用户点击页面时，＆＃34; Main＆＃34;类将呈现在屏幕上。当他们按下其中一个视频图像时，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>

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

非常感谢任何有用文档的链接，我所遵循的文档似乎导致我到目前为止遇到麻烦。

Answer 1

您当前的问题有两个问题，首先在React中并不总是使用标准HTML属性。例如，class为className，for为htmlFor。请参阅here支持哪些属性。

其次，React需要返回单个DOM节点，这就是为什么你没有在屏幕上看到任何内容并收到错误：Adjacent XJS elements must be wrapped in an enclosing tag。

如果您将渲染功能中当前包含的整个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>
    );
  }

Answer 2

除了@limelights答案：
第三，您的<body>是空的。尝试添加以下内容：

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

第四，您的ReactDOM.render（）需要DOM中的目标来放置您的组件。（文件here）例如：

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

至于你关于一般文档的问题，反应自己的教程（here）是一个很好的起点。

ReactJS渲染多个孩子

2 个答案: