javascript - Require class from another file in ReactJS - Stack Overflow

admin管理员组

文章数量:1296331

I have a generic "main.js" and I want to get a class from another file. Here's what I have so far

Structure

main.js
/js
  /src
    menu.js

main.js

// main.js
var React = require('react');
var ReactDOM = require('react-dom');
require('./js/src/menu.js');

function run() {
    ReactDOM.render(React.createElement(Menu), document.getElementById('menu'));
}

var loadedStates = ['plete', 'loaded', 'interactive'];

if (loadedStates.includes(document.readyState) && document.body) {
  run();
} else {
  window.addEventListener('DOMContentLoaded', run, false);
}

menu.js (Edited for brevity)

//menu.js
var React = require('react');
var ReactDOM = require('react-dom');

var Menu = React.createClass({
    render: function() {
        //do things
    }
});

Unfortunately, at the end of it all, I get Uncaught ReferenceError: Menu is not defined

I'm using browserify to pile(?) everything into a bundle.js elsewhere in the project structure

I have a generic "main.js" and I want to get a class from another file. Here's what I have so far

Structure

main.js
/js
  /src
    menu.js

main.js

// main.js
var React = require('react');
var ReactDOM = require('react-dom');
require('./js/src/menu.js');

function run() {
    ReactDOM.render(React.createElement(Menu), document.getElementById('menu'));
}

var loadedStates = ['plete', 'loaded', 'interactive'];

if (loadedStates.includes(document.readyState) && document.body) {
  run();
} else {
  window.addEventListener('DOMContentLoaded', run, false);
}

menu.js (Edited for brevity)

//menu.js
var React = require('react');
var ReactDOM = require('react-dom');

var Menu = React.createClass({
    render: function() {
        //do things
    }
});

Unfortunately, at the end of it all, I get Uncaught ReferenceError: Menu is not defined

I'm using browserify to pile(?) everything into a bundle.js elsewhere in the project structure

• javascript
• reactjs
• browserify

Share Improve this question Follow edited Jul 9, 2016 at 23:15 Elijah 8,61022 gold badges5858 silver badges5050 bronze badges asked Jan 18, 2016 at 2:14 PinwheelerPinwheeler 1,11133 gold badges1313 silver badges2727 bronze badges 1

• in menu.js do you have module.exports = Menu? sitepoint./understanding-module-exports-exports-node-js – azium Commented Jan 18, 2016 at 2:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You need to store required menu.js object in a variable and in menu.js export its object so that other modules can access it.

in main.js

var Menu = require('./js/src/menu.js');

and in menu.js at the end of file.

module.exports = Menu;

You have to export what you want to require:

// menu.js
module.exports = Menu;

// main.js
// This path should be relative to the current file
var Menu = require('./js/src/menu.js');

本文标签： javascriptRequire class from another file in ReactJSStack Overflow