【问题标题】:How does the inner function in a HOC get the propsHOC 中的内部函数如何获取 props
【发布时间】:2018-12-31 16:35:08
【问题描述】:

我只是在React 中使用HOC,让我有点困惑的是,在这个示例中我的内部函数如何访问props 作为参数?

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

export default withProps

【问题讨论】:

  • 请描述您要实现的目标、您希望如何调用此 HOC 以及为什么要这样编写代码(您是否正在关注教程/博客文章/...?)。否则,您可能会因为您的问题无法回答而投反对票。
  • 请清除您的用例
  • 这是一个没有任何功能目的的简单示例,它只是传递道具 - 我使用这个简单示例来帮助说明我的问题。
  • @Samuel 然后请更新您的问题并描述您希望使用此代码实现的具体目标以及客户端代码应该如何调用它...

标签: reactjs higher-order-functions higher-order-components


【解决方案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。

【讨论】:

  • 谢谢你,这真的有助于在我的脑海中打破它!
  • 很高兴能帮上忙 :-)
  • @ShubhamKhatri 我错过了 AliAnarkali 线程。你能重复他说的话吗?
猜你喜欢
  • 2021-01-06
  • 2021-10-17
  • 2019-11-14
  • 1970-01-01
  • 2021-04-01
  • 1970-01-01
  • 2020-12-17
  • 1970-01-01
相关资源
最近更新 更多