Question

React示例使用gulp，Grunt或npm以及Browserify或Webpack。在下面的代码中，我有一个没有这些的React应用程序，我只是想知道这最后一步是否可行。

一个HTML页面，它包含React，babel-browser和一个JavaScript文件：

＆＃13;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
  <script src="https://unpkg.com/react@0.14.0/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script>
  <script type="text/babel" src="js/App.js"></script>
</body>
</html>

＆＃13;

以下是App.js

＆＃13;

'use strict';
var {
  Component
} = React;
class Hdr extends Component {
  render() {
    return (<header className="container">Header</header>);
  }
};

class App extends Component {
  render() {
    return (
      <main>
        <Hdr />
      </main>
    );
  }
};
ReactDOM.render(<App />, document.body);

＆＃13;

App组件会引入Hdr组件。这是一个问题：如何将Hdr放在单独的JS文件中？我试过了，App找不到Hdr。

Here is a working demo

Answer 1

http://plnkr.co/edit/Pw75IIuonyz9UlBhvWo5?p=preview

你必须要做

window.Hdr = Hdr

它会起作用。

编辑：基于约书亚的评论

window.__MyApp__ = {
   // a lot of app props
}
window.__MyApp__.Hdr = Hdr

Answer 2

你可以像在任何其他脚本中一样在app中加载你的js文件。但我会建议你使用requirejs它会更干净。

React应用程序可以在没有构建系统的情况下在不同的JS文件中包含组件吗

2 个答案: