web-dev-qa-db-fra.com

reactjs Impossible de lire les 'clés' de propriété d'undefined

Je suis en train d'apprendre les réactions à travers un tutoriel et j'ai rencontré cette erreur. Cela dit "Ne peut pas lire les 'clés' de propriétés indéfinies" Mon code est très minime, donc je suppose qu'il est lié à la structure du langage. Est-ce que quelqu'un connaît le problème et une solution possible?

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

Edit: curieusement, après nos commentaires ci-dessus, j’ai vérifié si c’était bien la version de base de Babel, j’utilise celle-ci dans mon violon: 

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

La seconde, je passe à votre version ci-dessus, je reçois ceci:

Uncaught TypeError: Cannot read property 'keys' of undefined

Utilisez React.createClass pas ReactDOM.createClass et placez plusieurs lignes de code HTML entre parenthèses, comme suit:

Exemple de travail: 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')
);
37
JordanHendrix

Soyons clairs, car les autres réponses sont un peu compliquées. Le problème était d'utiliser "babel-core" au lieu de "babel-standalone". Recherchez simplement un cdn pour babel-standalone.

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

Aujourd'hui est mon premier jour avec React et j'ai rencontré ce problème lorsque j'ai essayé d'utiliser Babel pour transpiler le JSX!

Le problème est la version que vous essayez d'utiliser, utilisez plutôt celle-ci:

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

N'oubliez pas d'écrire type="text/babel" dans la balise <script> dans laquelle vous écrirez le JSX pour permettre à Babel de le copier pour vous. Si vous ne le faites pas, vous trouverez cette erreur (Comme je l'ai déjà fait face!: D :

Uncaught SyntaxError: Unexpected token <

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

Ceci est la version de babel-core qui ne me donne pas l'erreur comme ci-dessous:

Si vous souhaitez utiliser la dernière version, vous pouvez utiliser la dernière version autonome . (au 22 novembre 2018) 

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

Mais cela donne l'avertissement suivant:

"Vous utilisez le transformateur Babel intégré au navigateur. Assurez-vous de précompiler vos scripts pour la production - https://babeljs.io/docs/setup/ "

 enter image description here

0
devDeejay