Einfache Komponente wird nicht gerendert: Reagieren Sie js

Ich tring, um zu tun, mit unter Code, aber ich bekomme nicht HTML Element im Browser. In der Konsole ist kein Fehler aufgetreten.Einfache Komponente wird nicht gerendert: Reagieren Sie js

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>React without npm</title> 
     <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://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> 
    </head> 
    <body> 
    <div id="test"></div> 
    <script type="text/babel"> 

     var reactTest = React.createClass({ 
      render: function(){ 
       return(
        <h1>React Without NPM</h1> 
       ); 
      } 
     }); 

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

Kann auf diese bitte jemand helfen.

Quelle

2017-02-08 suyesh

Wenn ein Reagieren Class name beginnt mit einem lowercase Brief dann keine Methoden in der class aufgerufen, das heißt nichts Renders, und Sie erhalten keine Fehlermeldung im Browser-Konsole, weil Kleinbuchstaben als HTML Elemente behandelt werden, Es ist eine Regel, dass alle React components müssen mit einem upper case Brief beginnen, also immer Großbuchstaben verwenden.

Anstelle von reactTest verwenden Sie diese: ReactTest wird es funktionieren.

Per DOC:

Benutzerdefinierte Komponenten aktivierungspflichtig sind.

Wenn ein Element-Typ mit einem Kleinbuchstaben beginnt, bezieht er sich auf eine integrierte Komponente wie <div> oder <span> und führt zu einem String ‚div‘ oder ‚Spanne‘ zu React.createElement geben. Typen, die mit einem Großbuchstaben wie <Foo /> kompilieren, um React.createElement(Foo) und entsprechen einer Komponente definiert oder importiert in Ihrer JavaScript-Datei.

Wir empfehlen, Komponenten mit einem Großbuchstaben zu benennen. Wenn Sie eine Komponente haben, die mit einem Kleinbuchstaben beginnt, weisen Sie sie einer Großbuchstabenvariablen zu, bevor Sie sie in JSX verwenden.

Überprüfen Sie den Arbeitscode:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>React without npm</title> 
 
     <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://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="test"></div> 
 
    <script type="text/babel"> 
 

 
     var ReactTest = React.createClass({ 
 
      render: function(){ 
 
       return(
 
        <h1>React Without NPM</h1> 
 
       ); 
 
      } 
 
     }); 
 

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

Quelle

2017-02-08 10:10:36

Die folgende funktioniert, versuchen Sie es:

 var ReactTest = React.createClass({ 
 
      render: function(){ 
 
       return(
 
        <h1>React Without NPM</h1> 
 
       ); 
 
      } 
 
     }); 
 

 
     ReactDOM.render(<ReactTest />,document.getElementById('test'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="test" ></div>

Quelle

2017-02-08 10:12:36

Einfache Komponente wird nicht gerendert: Reagieren Sie js

Antwort

Verwandte Themen