用高阶组件去实现功能开关
使用高阶组件去实现我们的toggle, 从而实现组件的多样性.
比如下面的例子, 实现某个功能的开/关
// featureToggle.js
const isFeatureOn = function (featureName) {
// return true or false
};
import { isFeatureOn } from './featureToggle';
const toggleOn = (featureName, ComposedComponent) => class HOC extends Component {
render() {
return isFeatureOn(featureName) ? <ComposedComponent {...this.props} /> : null;
}
};
// 用法
import AdsComponent from './Ads'
const Ads = toggleOn('ads', AdsComponent);
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程