组件的高阶函数过滤器方法

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 />
          }
        }
    }

但是如何过滤掉生成BTN方法？

Answer 1

如果我正确理解您的问题，则可以在包装组件中检查自定义道具：

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

并根据 hoc 的逻辑传递该道具：

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 } />
    }
  }
}