HOC中的内部功能如何获得道具

问题描述

我只是想在React中使用HOC，让我有些困惑的是，在此示例中，我的内部函数如何获得对props的访问权限?

I'm just getting my head around using HOC in React, one thing that is confusing me slightly is, how does my inner function in this example gain access to props as an argument?

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

export default withProps

推荐答案

要在@AliAnarkali所说的内容中添加更多内容，HOC会为您返回一个组件，以便您在编写时像这样

To add more to what @AliAnarkali said, a HOC returns you a component so when you write like

const EnhancedApp = withProps(App);

EnhancedApp基本上是

EnhancedApp is basically

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

哪个功能组件以及当您渲染EnhancedApp之类的

which a functional component and when you render EnhancedApp like

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

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

It is similar to how a functional component receives onChange and value as props and hence in an HOC, the inner function gets the props like this.

这篇关于HOC中的内部功能如何获得道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！