gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:17:49 26 4
gpt4 key购买 nike

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

Here is a working demo .

最佳答案

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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com