开发 reactjs 应用程序时遇到的问题

Question

我用react js写了一个简单的评论框app。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
     var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});
    </script>
  </body>
</html>

当我在本地服务器上打开该代码时，出现了一个空白页面。我什至像这样使用 bower 安装了 reactjs：

bower install --save react

但结果是一样的
为什么加载空白页？

Answer 1

您已经定义了 React 类，但还没有告诉 React 将它们放在 DOM。

尝试添加：

React.render(<CommentForm />, document.getElementById('example'));

或：

React.render(<CommentList />, document.getElementById('example'));

在块的底部查看页面上的元素。

理想情况下，表单和列表都需要单独的 DIV。例如

<div id='commentform'></div><div id='commentlist'></div>

Answer 2

您只是在定义类，实际上并未向 DOM 渲染任何内容。我怀疑您想创建一个由 CommentList 和 CommentForm 组成的顶级组件，并将其呈现到 example div.

var Comments = React.createClass({
    render: function () {
        return (
            <div className="comments">
                <CommentList/>
                <CommentForm/>
            </div>
        );
    }
});

React.render(<Comments/>, document.getElementById("example"));

查看 React.render. You may also want to take a look at the React tutorial 的文档。

Fiddle

开发 reactjs 应用程序时遇到的问题

Problems while developing a reactjs app

javascript

reactjs