2016-04-17 3 views
25

Ich lerne reactjs durch ein Tutorial und lief in diesen Fehler. Das sagt "Ich kann keine Property-Schlüssel" von undefined lesen "Mein Code ist sehr minimal, also nehme ich an, dass es mit der Struktur der Sprache zu tun hat. Kennt jemand das Problem und eine mögliche Lösung?reactjs Kann Eigenschaft 'Schlüssel' von undefined nicht lesen

<!DOCTYPE html> 

<html> 
<head> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script> 
    <title>ReactJs</title> 
</head> 
<body> 
    <div id="app"></div> 

    <script type="text/babel"> 
     var HelloWorld = ReactDOM.createClass({ 
     render: function() { 
     return 
     <div> 
      <h1>Hello World</h1> 
      <p>This is some text></p> 
     </div> 
     } 
     }); 
     ReactDOM.render(
     <HelloWorld />, document.getElementById('app')); 
    </script> 
</body> 
</html> 
+0

Haben Ihre Füße das funktioniert? – JordanHendrix

+1

Ich habe dein Skript in meine App eingefügt und habe immer noch den gleichen Fehler. Es hat mir klar gemacht, dass das Problem bei der Version von Babel, die ich verwende, vermutet wird. Ich bin mir nicht sicher, was das Problem ist, aber ich werde versuchen, eine andere Version zu verwenden. – NVA

+0

ungerade, ich habe gerade überprüft, das ist die, die ich benutze: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js – JordanHendrix

Antwort

31

Edit: seltsam, nach unseren Kommentaren oben, überprüfte ich, um zu sehen, ob es tatsächlich die babel Core-Version war, ich bin mit diesem in meiner Geige:

https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js

Die zweite I wechseln Sie in Ihrer Version oben ich diese bekommen:

Uncaught TypeError: Cannot read property 'keys' of undefined 

Verwenden React.createClass nicht ReactDOM.createClass und wickeln Sie mehrere Zeilen hTML-Code in Klammern li so ke:

Arbeitsbeispiel: https://jsfiddle.net/69z2wepo/38998/

var Hello = React.createClass({ 
    render: function() { 
    return (  
     <div> 
     <h1>Hello World</h1> 
     <p>This is some text</p> 
     </div> 
    ) 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 
+9

einen Grund, warum Babel Version 6 diesen Fehler gegeben? Ich hatte es auch dann auf Version 5.8.24 umgestellt Fehler ist weg. –

+1

Ich hatte gerade den gleichen Fehler und festgestellt, dass die Version von Babel für den Browser, den wir verwendeten, veraltet war. Die neueste Version, die Sie im Browser verwenden können, ist https://cdnjs.com/libraries/babel-standalone – MattGoldwater

+0

Die Version von babel muss kleiner als 6.0.0 sein –

-3

Ich habe nicht mit React gearbeitet, aber es gibt ein paar Dinge, die ich sehe, dass sein können Ihre Probleme zu verursachen. Erstens, React.createClass anstelle von ReactDOM.createClass. Zweitens müssen Sie Ihre HTML in Klammern wickeln:

var HelloWorld = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h1>Hello World</h1> 
     <p>This is some text></p> 
     </div> 
    ); 
    } 
}); 

Dies sollte es

1

Heute bekommen arbeitet mein erster Tag ist mit Reaktion, und ich habe dieses Problem konfrontiert, als ich versuchte Babel zu verwenden, um transpile der JSX!

Das Problem ist die Version, die Sie verwenden möchten, diese eine Bitte verwenden Sie stattdessen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> 

Vergessen Sie nicht type="text/babel" im <script>-Tag zu schreiben, die Ihnen die JSX schreiben wird in Babel transpile zu lassen es für Sie, wenn Sie nicht tun, werden Sie diesen Fehler finden (wie ich es auch gegenübergestellt haben: D):

Uncaught SyntaxError: Unexpected token <

0

einfach klar zu sein, wie die anderen answ Die sind ein wenig verworren. Das Problem war "babel-core" statt "babel-standalone". Suchen Sie stattdessen nach einer CDN für Babel-Standalone.

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js 
Verwandte Themen