javascript - 组件的高阶函数过滤方法

Question

我这里有一个generateBtn方法，我也用了Auth作为HOC

@Auth
export default class MyComponent extends Component {
    generateBtn(){ return <button>Submit</button> }
    render(){
       return(<div>hello world {this.generateBtn()}</div>)
    }
}

在我的授权中我有这个

export default function Auth(WrappedComponent) {
        return class WithAuth extends Component {

          render() {
             // how to filter generateBtn method?
             return <WrappedComponent />
          }
        }
    }

但是如何过滤掉generateBtn方法呢？

Answer 1

如果我理解正确你的问题，你可以检查包装组件中的自定义 Prop :

@Auth
export default class MyComponent extends Component {
  generateBtn(){
    return <button>Submit</button>
  }

  render(){
    return (
      <div>
        hello world { this.props.hasAuth && this.generateBtn() }
      </div>
    )
  }
}

并根据 HOC 的逻辑传递该 prop:

export default function Auth(WrappedComponent) {
  return class WithAuth extends Component {

    render() {
      // You'll have some way of knowing if authentication was
      // correct here, let's hardcode `false` for now
      const authenticated = false

      return <WrappedComponent hasAuth={ authenticated } />
    }
  }
}