reactjs - HOC 中的内部函数如何获取 props

Question

我刚刚开始在 React 中使用 HOC，让我有点困惑的一件事是，这个示例中的内部函数如何访问props 作为参数？

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

export default withProps

Answer 1

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

const EnhancedApp = withProps(App);

EnhancedApp 基本上是

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

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

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

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