在reactionCommerce中,我想根据某些条件在配置文件组件/页面的Navbar中隐藏TagNav。我是新来的reactionCommerce
答案 0 :(得分:1)
您需要使用Reaction Commerce的Component API覆盖TagNav
。
由于您只想自定义组件的呈现方式,因此我建议使用getRawComponent
来获取Response的默认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);