用高阶组件去实现功能开关

优质
小牛编辑
128浏览
2023-12-01

使用高阶组件去实现我们的toggle, 从而实现组件的多样性.

比如下面的例子, 实现某个功能的开/关

  1. // featureToggle.js
  2. const isFeatureOn = function (featureName) {
  3. // return true or false
  4. };
  5. import { isFeatureOn } from './featureToggle';
  6. const toggleOn = (featureName, ComposedComponent) => class HOC extends Component {
  7. render() {
  8. return isFeatureOn(featureName) ? <ComposedComponent {...this.props} /> : null;
  9. }
  10. };
  11. // 用法
  12. import AdsComponent from './Ads'
  13. const Ads = toggleOn('ads', AdsComponent);