ReactJS: Uncaught ReferenceError: require n'est pas défini

Je suis en train d'utiliser à SEC à Réagir JS. Je suis en train d'utiliser le même code HTML partielle dans les différents fichiers

partielle:

var AdminMenu = React.createClass({
 getInitialState: function() {
   return {};
 },
 render: function() {
   return (
     <h1>Menu</h1>
   );
 }
});

Je suis requeiring dans un autre fichier:

require('./scripts/adminMenu.js');

ReactDOM.render(
 <AdminMenu/>,
 document.getElementById('content')
);

Mais j'obtiens une erreur:

Uncaught ReferenceError: require is not defined

de ces scripts sont inclus sur la page html comme:
<script type="text/babel" src="scripts/admin.js"></script>

Je suis en utilisant webpack

source d'informationauteur Pavel Babin

  1. 4

    Si vous n'êtes pas à l'aide de n'importe quel module bundler comme webpack ou etc.
    Vous devriez vous attribuer des composants javascript objet global, car les objets de .jsx ne sont pas mis dans la portée globale

    Voici donc la solution (utilisé fenêtre objet ici)

    Défini module:

    window.AdminMenu = React.createClass({
  getInitialState: function() {
    return {};
  },
  render: function() {
    return (
      <h1>Menu</h1>
    );
  }
});

    Où vous l'utilisez:

    ReactDOM.render(
  <window.AdminMenu/>,
  document.getElementById('content')
);
  2. 2

    Envisager d'utiliser ES6 modules au lieu d'exiger à Réagir

    exporter un module:

    //src/hello.js
//export as default
export default const hello = ({name}) => (
  <h1>Hello {name}</h1>
)

    importer un module:

    //src/index.js
//import from relative directory (src)
import Hello from './hello'

const App = () => {
  return (
    <div>
      <Hello name="Pavel" />
    </div>
  )
}
  3. 2

    Vous devez en savoir plus sur les modules par exemple ici: https://www.sitepoint.com/understanding-es6-modules/

    Les principaux problèmes dans votre code existant:

    1. Il semble, en dépit de cela, vous utilisez Webpack, vous l'utilisez de manière erronée. Dans la version finale du bundle (final fichier JS), il ne devrait pas contenir de 'besoin' des mots-clés. Avez-vous l'utilisation de Babel avec votre webpack? S'il vous plaît, montrez-nous votre WebPack config.
    2. Votre AdminMenu fichier ne ressemble pas du module. Votre adminMenu fichier doit contenir "exporter", mot-clé, après que vous serez en mesure de "besoin" ou "importer" à partir d'autres fichiers.

    Aussi, vous pouvez écrire vos questions en commentaires avec la russie, si c'est plus pratique pour vous

  4. 0

    Vous devez utiliser 

    const { Component } = React;
const { render } = ReactDOM;

    en place de

    import React, { Component } from 'react';
import ReactDOM from 'react-dom';