2016-04-17 16 views
25

私はチュートリアルを通してreactjsを学習していて、このエラーが発生しました。それは "未定義のプロパティ 'キーを読み取ることができません"私のコードは非常に最小限であるので、私はそれが言語の構造と関係していると仮定します。誰もが問題と可能な解決策を知っていますか?reactjs未定義のプロパティ 'keys'を読み取ることができません

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

足がこれで機能しましたか? – JordanHendrix

+1

あなたのスクリプトを自分のアプリケーションに挿入しましたが、同じエラーが表示されました。それは、問題が私が使っているバベルのバージョンであると思われると気づいた。問題の内容はわかりませんが、別のバージョンを使用してみます。 – NVA

+0

奇妙な、私はこれが私が使用しているものであることを確認しました:https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js – JordanHendrix

答えて

31

編集:奇妙な、上記の私たちのコメントの後、私はそれが実際にバベルのコアバージョンだった場合、私はバイオリンで、このいずれかを使用していますかチェック:

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

二Iお使いのバージョンへの切り替え、私はこれを取得の上:

Uncaught TypeError: Cannot read property 'keys' of undefined 

使用React.createClassないReactDOM.createClassを括弧李にHTMLの複数行を折り返しますKEはそう:

実施例:私が働いていない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

Babelバージョン6がそのエラーを与えた理由は何ですか?私はあまりにもバージョン5.8.24エラーに行って切り替えていた。 –

+1

私はちょうど同じエラーがあり、使用していたブラウザ用のBabelのバージョンが推奨されなくなったことがわかりました。ブラウザで使用できる最新のバージョンはhttps://cdnjs.com/libraries/babel-standaloneです – MattGoldwater

+0

バーベルのバージョンは6.0.0未満でなければなりません –

-3

は前に反応するが、私はそれはあなたの問題を引き起こしている可能性の参照がいくつかあります。まず、ReactDOM.createClassの代わりにReact.createClass。リアクトと私の最初の日である

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

これは、それが

1

今日働いてもらう必要があり、私はtranspileするバベルを使用しようとしたとき、私はこの問題に直面してきました:第二に、あなたは括弧であなたのhtmlをラップする必要がありますJSX!

問題は、あなたが使用しようとしているバージョンで、代わりにこれを使用してください:

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

あなたはバベルtranspileを聞かせするにはJSXを書き込みます<script>タグにtype="text/babel"を書くことを忘れないでくださいそれあなたのためにあなたがいない場合、このエラーを見つけるだろう(私もそれに直面してきたように!:D)

Uncaught SyntaxError: Unexpected token <

0

ただ、明確にするために、他のANSWなどersはちょっと複雑です。問題は、 "babel-standalone"の代わりに "babel-core"を使用していたことです。代わりにバベルスタンドアローンのCDNを探してください。

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js 
関連する問題