Question

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

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

在我的Auth中我有这个

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

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

但是如何过滤掉generateBtn方法？

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

组件的高阶函数滤波方法

1 个答案: