【问题标题】:how to rewrite footer in the custom plugin Reaction Commerce如何在自定义插件 Reaction Commerce 中重写页脚
【发布时间】:2018-07-27 02:12:43
【问题描述】:

现在,我正在使用Reaction Commerce 1.10。我想创建一个自定义插件并重写页脚,但不知道该怎么做。

这是页脚代码:

import React from "react";
import { registerComponent } from "/imports/plugins/core/components/lib";

const Footer = () => (
  <div className="reaction-navigation-footer footer-default">
    <nav className="navbar-bottom">
      <div className="row">
        {/* Footer content */}
      </div>
    </nav>
  </div>
);

registerComponent("Footer", Footer);

export default Footer;

【问题讨论】:

    标签: reaction-commerce


    【解决方案1】:

    您可以通过首先创建自定义插件来做到这一点:

    reaction plugins create --name your-footer-plugin

    然后,在/imports/plugins/custom/your-footer-plugin/client下创建一个components目录。

    /imports/plugins/custom/your-footer-plugin/client/components 中,创建一个Footer.jsx 文件。

    在此文件中,使用组件 API 将 Footer 组件替换为您想要的组件:

    import React from "react";
    import { replaceComponent } from "@reactioncommerce/reaction-components";
    
    const Footer = () => (
      <footer>
        <p>This is your new, custom footer.</p>
      </footer>
    );
    
    replaceComponent("Footer", Footer);

    最后,确保在/imports/plugins/custom/your-footer-plugin/client/components 中创建一个index.js 文件来导入您的组件:

    import "./Footer";

    另一个index.js/imports/plugins/custom/your-footer-plugin/client 中导入您的component 目录索引:

    import "./components";

    确保使用 reaction reset -n &amp;&amp; reaction 重新启动 Reaction 以使这些更改生效。

    【讨论】:

    • 非常感谢您提供所有这些详细信息。只是一件事,我认为我应该先将原始页脚导入到 Footer.jsx 中。否则,我会收到一些错误消息。
    • 不需要导入默认的Footer组件。你遇到了什么错误?
    • 对不起。这是我的错。该错误消息不适用于页脚组件。您的代码完美运行。谢谢~
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-02
    • 1970-01-01
    • 2020-01-28
    • 2012-10-02
    • 2011-12-27
    相关资源
    最近更新 更多