React Tutorial: Composing Komponenten zeigen leere Seite

Ich bin neu zu lernen React Tutorial. Wenn ich das Beispiel Composing-Komponenten versuche, zeigt es leere Seite. Und es ist normal, wenn es nur eine Komponente gibt. Ich suche die Frage viele Male, scheint es ist so einfach, dass niemand sonst fragen ... Darunter ist mein Code, vielen Dank.React Tutorial: Composing Komponenten zeigen leere Seite

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

     <link rel="stylesheet" href="css/base.css" /> 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
     <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
     <script src="https://unpkg.com/[email protected]/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>

Quelle

2017-05-12 Xiaolei Li

'' aber Sie habe es definiert wie 'var ComentForm =' korrigiere die Schreibweise in var CommentForm – XYZ

Vielen Dank ... Es zeigt normal, jetzt. Ich bin so dumm ........ –

Ich habe es als Antwort geschrieben. Bitte akzeptieren/upvote, dass – XYZ

Einfache Eingabe error.You haben
<CommentForm /> verwendet, aber Sie haben es wie var ComentForm = .correct der Schreibweise definiert var CommentForm

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

 
     <link rel="stylesheet" href="css/base.css" /> 
 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
 
     <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
 
     <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
 
     <script src="https://unpkg.com/[email protected]/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>

Quelle

2017-05-12 08:32:09 XYZ

Danke. Aber es sagt mein Ruf weniger als 15, so kann ich nicht abstimmen. –

Bitte akzeptieren Sie die Antwort – XYZ

Es ist jetzt akzeptiert. –

React Tutorial: Composing Komponenten zeigen leere Seite

Antwort

Verwandte Themen