2016-04-17 30 views
25

Uczę się reactjs przez samouczek i wpadłem na ten błąd. To znaczy "Nie można odczytać właściwości" kluczy "niezdefiniowanych" Mój kod jest bardzo minimalny, więc zakładam, że ma to związek ze strukturą języka. Czy ktoś zna problem i możliwe rozwiązanie?reactjs Nie można odczytać właściwości 'kluczy' nieokreślonego

<!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

Czy Twoje stopy działały? – JordanHendrix

+1

Wprowadziłem twój skrypt do mojej aplikacji i wciąż mam ten sam błąd. Uświadomiłem sobie, że podejrzewam, że problem dotyczy wersji Babel, której używam. Nie jestem pewien, na czym polega problem, ale spróbuję użyć innej wersji. – NVA

+0

dziwne, właśnie sprawdziłem, czy to ten, którego używam: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js – JordanHendrix

Odpowiedz

31

Edit: dziwnie, po nasze komentarze powyżej, sprawdziłem, aby zobaczyć, czy to rzeczywiście wersja rdzeń babel, używam ten w moim skrzypce:

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

Drugi I przełączyć się do wersji powyżej uzyskać to:

Uncaught TypeError: Cannot read property 'keys' of undefined 

Użyj React.createClass nie ReactDOM.createClass i owinąć kilka linijek kodu HTML w nawiasie Li ke więc:

Przykład pracy: 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

jakikolwiek powód, dla którego wersja Babel 6 podała ten błąd? Miałem to też, a następnie przejść do błędu wersji 5.8.24 minęło. –

+1

Po prostu miałem ten sam błąd i okazało się, że wersja Babel dla przeglądarki, której używaliśmy, była przestarzała. Najnowszą wersją, której możesz używać w przeglądarce, jest https://cdnjs.com/libraries/babel-standalone – MattGoldwater

+0

Wersja babel musi być mniejsza niż 6.0.0 –

-3

ja nie pracowałem z React wcześniej, ale istnieje kilka rzeczy, które widzę, które mogą być przyczyną problemów z. Najpierw React.createClass zamiast ReactDOM.createClass. Po drugie, trzeba zawinąć html w nawiasach:

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

ten powinien dostać pracy

1

Dziś jest mój pierwszy dzień z React, a ja w obliczu tego problemu, gdy próbowałem korzystać Babel do transpile JSX!

Kwestia jest wersja próbujesz użyć, skorzystaj z tego jednego Zamiast:

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

Nie zapomnij napisać type="text/babel" w tagu <script> które piszesz JSX by pozwolić Babel transpile to dla ciebie, jeśli nie znajdziesz tego błędu (jak zostało postawione zbyt: D) ​​:

Uncaught SyntaxError: Unexpected token <

0

Wystarczy być jasne, jak inne POUFNY są nieco zawiłe. Problem polegał na używaniu "babel-core" zamiast "babel-standalone". Wystarczy spojrzeć na cdn zamiast babel-standalone.

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