需要来自ReactJS中另一个文件的类

时间:2016-01-18 02:14:57

标签: javascript reactjs browserify

我有一个通用" main.js"我想从另一个文件中获取一个类。这是我到目前为止所拥有的

结构

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 = ['complete', 'loaded', 'interactive'];

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

menu.js (编辑简洁)

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

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

不幸的是,在这一切结束时,我明白了 Uncaught ReferenceError: Menu is not defined

我使用browserify将所有内容编译成项目结构中其他地方的bundle.js

2 个答案:

答案 0 :(得分:6)

您需要在变量中存储所需的menu.js对象,并在menu.js中导出其对象,以便其他模块可以访问它。

在main.js中

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

并在文件末尾的menu.js中。

module.exports = Menu;

答案 1 :(得分:2)

您必须导出您想要的内容:

// menu.js
module.exports = Menu;

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