HOC中的inner函数是如何获取props的

Question

我只是开始使用HOCin React，让我有点困惑的一件事是，在这个例子中我的内部函数如何获得props作为参数的访问权限？

const withProps = Component => (
  props => {
    return <Component {...props}/>
  }
)

export default withProps

Answer 1

为了添加更多 @AliAnarkali 所说的内容，HOC 会返回一个组件，所以当你这样写时

const EnhancedApp = withProps(App);

增强型应用程序基本上是

  const EnhancedApp = props => {
    return <Component {...props}/>
  }

这是一个功能组件，当你渲染EnhancedApp时，就像

<EnhancedApp onChange={this.onChange} value={this.state.value} />

它类似于功能组件如何接收 onChange 和 value 作为 props，因此在 HOC 中，内部函数会像这样获取 props。