如何将带有模板文件的 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 (将#修改为@）