Question

我是新手学习React Tutorial。当我尝试组合组件的示例时，它显示空白页面。只有一个组件是正常的。我多次搜索这个问题，看起来很容易让别人问... 下面是我的代码，非常感谢。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
         <title>React Tutorial</title>

        <link rel="stylesheet" href="css/base.css" />
        <script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
        <script src="https://unpkg.com/remarkable@1.7.1/dist/remarkable.min.js"></script>

      </head>
      <body>
       <div id="content"></div>
        <script type="text/babel">

var CommentList = React.createClass({
    render: function() {
        return (
            <div className = "commentList">
            Hello, world! I am a CommentList.
            </div>
        );
    }
});

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

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

ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);
</script>
      </body>
          </html>

Answer 1

简单的输入错误。您使用过 <CommentForm />，但您已将其定义为var ComentForm =。将拼写更正为var CommentForm

＆＃13;

<!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8">
        <title>React Tutorial</title>

       <link rel="stylesheet" href="css/base.css" />
       <script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
       <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
       <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
       <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
       <script src="https://unpkg.com/remarkable@1.7.1/dist/remarkable.min.js"></script>

     </head>
     <body>
      <div id="content"></div>
       <script type="text/babel">

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>
       );
   }
});

var CommentBox = React.createClass({
   render: function() {
       return (
           <div className = "commentBox">
           <h1>Comments</h1>
           <CommentList />
           <CommentForm />
           </div>
       );
   }
});

ReactDOM.render(
   <CommentBox />,
   document.getElementById('content')
);
</script>
     </body>
         </html>

＆＃13;

React Tutorial：组合组件显示空白页面

1 个答案: