reactjs - 如何在 reactcommerce 的个人资料页面中隐藏 TagNav

Question

在reactionCommerce中，我想根据某些条件在配置文件组件/页面的导航栏中隐藏TagNav。我是 reactCommerce 的新手

标签： reactjsreactive-programmingreaction-commerce

Answer 1

您需要TagNav使用 Reaction Commerce 的组件 API 进行覆盖。

由于您只想自定义组件的呈现方式，我建议使用getRawComponent获取 Reaction 的默认TagNav组件而不使用其 HOC，然后扩展它并使用replaceComponent.

import React from "react";
import { Components, getRawComponent, replaceComponent } from "@reactioncommerce/reaction-components";

const TagNav = getRawComponent("TagNav");

class CustomTagNav extends TagNav {
  /**
   * This implementation of render will override TagNav's default
   */
  render() {
    const { navbarOrientation, navbarPosition, navbarAnchor, navbarVisibility } = this.props;
    
    // Provided that you want to return a whole different component tree if your condition matches
    
    if (yourCondition) {
      return (
        {/* What you want to return if TagNav isn't shown */}
      );
    }
    
    return (
      <div className={`rui tagnav ${navbarOrientation} ${navbarPosition} ${navbarAnchor} ${navbarVisibility}`}>
        <div className="navbar-header">
          <Components.Button
            primary={true}
            icon="times"
            status="default"
            className="close-button"
            onClick={this.props.closeNavbar}
          />
          {this.props.children}
        </div>
        {this.renderShopSelect()}
        <div className="navbar-items">
          <Components.DragDropProvider>
            <Components.TagList
              {...this.props}
              isTagNav={true}
              draggable={true}
              enableNewTagForm={true}
            >
              <div className="dropdown-container">
                <Components.TagGroup
                  {...this.props}
                  editable={this.props.editable === true}
                  tagGroupProps={this.tagGroupProps(this.state.selectedTag || {})}
                  onMove={this.props.onMoveTag}
                  onTagInputBlur={this.handleTagSave}
                  onTagMouseOut={this.handleTagMouseOut}
                  onTagMouseOver={this.handleTagMouseOver}
                  onTagSave={this.handleTagSave}
                />
              </div>
            </Components.TagList>
          </Components.DragDropProvider>
          {this.props.canEdit && this.renderEditButton()}
        </div>
      </div>
    );
  }
}

replaceComponent("TagNav", CustomTagNav);