对于代码优化,以下是一些建议:
- 避免重复的条件判断:可以将
haveAuthByCode
函数的调用结果保存到变量中,避免多次调用。
const hasHZHAPPBannerAdmin = haveAuthByCode('HZHAPPBannerAdmin');
const hasHosHotelInfoBannerAdmin = haveAuthByCode('HosHotelInfoBannerAdmin');
const hasHosIndexBannerAdmin = haveAuthByCode('HosIndexBannerAdmin');
<Tabs defaultActiveKey="1">
{hasHZHAPPBannerAdmin && (
<Tabs.TabPane tab="HOS酒店信息" key="1">
<BrandProduct displayPlatform="HOS酒店信息" />
</Tabs.TabPane>
)}
{hasHosHotelInfoBannerAdmin && (
<Tabs.TabPane tab="华住会指数" key="2">
<BrandProduct displayPlatform="华住会指数" />
</Tabs.TabPane>
)}
{hasHosIndexBannerAdmin && (
<Tabs.TabPane tab="华住会APP" key="3">
<HzhApp />
</Tabs.TabPane>
)}
</Tabs>
- 避免不必要的条件判断:如果有些选项在每个条件中都是不可见的,可以考虑直接在渲染前进行筛选。
const authCodes = ['HZHAPPBannerAdmin', 'HosHotelInfoBannerAdmin', 'HosIndexBannerAdmin'];
const visibleOptions = authCodes.filter(code => haveAuthByCode(code));
<Tabs defaultActiveKey={visibleOptions[0]}> {/* 使用第一个可见选项作为默认激活的选项 */}
{visibleOptions.map((code, index) => (
<Tabs.TabPane tab={getTabTitle(code)} key={index + 1}>
{getContentComponent(code)}
</Tabs.TabPane>
))}
</Tabs>
这里,getTabTitle
和 getContentComponent
是两个辅助函数,用于根据权限编码获取对应的选项标题和内容组件。
通过以上优化,可以减少不必要的条件判断次数,并提高代码的可读性和可维护性。
内容由零声教学AI助手提供,问题来源于学员提问