web-dev-qa-db-ja.com

reactjsは未定義のプロパティ「キー」を読み取ることができません

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

   <!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>
javascriptreactjskey
32
NVA

編集：奇妙なことに、上記のコメントの後、それが実際にバベルコアバージョンであるかどうかを確認しました、私はこれをフィドルで使用しています：

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

2番目に上記のバージョンに切り替えると、次のようになります。

Uncaught TypeError: Cannot read property 'keys' of undefined

つかいます React.createClass not ReactDOM.createClassそして、次のように複数行のhtmlを括弧で囲みます。

作業例： 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')
);
38
JordanHendrix

明確にするために、他の答えは少し複雑です。問題は「babel-standalone」の代わりに「babel-core」を使用していたことです。代わりにbabel-standaloneのcdnを検索してください。

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

今日はReactの最初の日であり、Babelを使用してJSXをトランスパイルしようとしたときにこの問題に直面しました！

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

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

type="text/babel"を<script>タグに書き込むことを忘れないでください。これは、JSBを記述してBabelにトランスパイルさせるためです。そうしないと、このエラーが見つかります（私もそれに直面しているように！：D）：

Uncaught SyntaxError: Unexpected token <

3
Elharony
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>

これは、babel-coreのバージョンであり、以下に示すようにエラーは発生しません。

最新バージョンを使用する場合は、最新のスタンドアロンバージョンを使用できます。 （2018年11月22日）

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

ただし、次の警告が表示されます。

"ブラウザ内でBabelトランスフォーマを使用しています。本番用にスクリプトをプリコンパイルしてください- https://babeljs.io/docs/ setup / "

enter image description here

0
devDeejay