如何解决如何将带有模板文件的 js 文件包装并连接到一个 React 组件中?
是否有任何 webpack 插件或者我是否需要创建自己的插件来解决这个问题?
我尝试通过如下定义 OOP 原型方式来创建 React 组件:
输入:component.js
检查是否存在:component.html
- 然后:尝试使用带有 pre-text 和 post- 的包装文件模板 component.html 文件连接 component.js文字
- 其他:保留 component.js 文件
看我的例子:
登录页面.js
const React = require("react");
function LoginPage() {
React.Component.call(this);
}
LoginPage.prototype = {LoginPage.constructor,...React.Component.prototype};
LoginPage.prototype.doLogin = function() {
// TODO: call service api
};
登录页面.html
<div class="vbox">
<style>
require("../common/layout-style.scss");
require("../common/theme-style.scss");
.input-group {
flex: 1 auto,margin-bottom: 1em;
}
</style>
<script type="text/javascript">
const InputGroup = require("../common/InputGroup");
</script>
<div class="vbox">
<span class="title">Login Page</span>
<InputGroup class="input-group" label="Email:" type="text" vertical />
<InputGroup class="input-group" label="Password:" type="password" vertical />
<div class="hbox">
<button click={doLogin}>Login</button>
</div>
</div>
</div>
是否有任何 Webpack 插件可以在 babel 编译之前将它们包装并连接成一个,例如:
const React = require("react");
const InputGroup = require("../common/InputGroup");
function LoginPage() {
React.Component.call(this);
}
LoginPage.prototype = {LoginPage.constructor,...React.Component.prototype};
LoginPage.prototype.doLogin = function() {
// TODO: call service API
};
LoginPage.prototype.render = function() {
return (
<div class="vbox">
<style>
require("../common/layout-style.scss");
require("../common/theme-style.scss");
.input-group {
flex: 1 auto,margin-bottom: 1em;
}
</style>
<div class="vbox">
<span class="title">Login Page</span>
<InputGroup class="input-group" label="Email:" type="text" vertical />
<InputGroup class="input-group" label="Password:" type="password" vertical />
<div class="hbox">
<button click={doLogin}>Login</button>
</div>
</div>
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。