React 示例使用 gulp、Grunt 或 npm 以及 Browserify 或 Webpack。在下面的代码中，我有一个没有这些的 React 应用程序，我只是想知道最后一步是否可行。
一个包含 React、babel-browser 和一个 JavaScript 文件的 HTML 页面:
<!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>这里是App.js
'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);App 组件拉入 Hdr 组件。问题是:如何将 Hdr 放在单独的 JS 文件中？我尝试了一下，App找不到Hdr。
最佳答案
http://plnkr.co/edit/Pw75IIuonyz9UlBhvWo5?p=preview
你只需要做
window.Hdr = Hdr
它会起作用的。
编辑:基于约书亚的评论
window.__MyApp__ = {
// a lot of app props
}
window.__MyApp__.Hdr = Hdr
关于reactjs - React 应用程序可以在没有构建系统的情况下在不同的 JS 文件中包含组件吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33072269/