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

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

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

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

export default withProps

最佳答案

为了添加更多 @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。

关于reactjs - HOC 中的内部函数如何获取 props,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51492098/

相关文章:

javascript - 如何在React中使用dangerouslySetInnerHTML传递样式

javascript - 使用availity-reactstrap-validation时如何处理空值

reactjs - 将辅助功能属性传递给 Material-ui-pickers Calendar 中的嵌套按钮

prolog - 是否有不需要类型系统的更高阶 Prolog?

android - 高阶函数作为绑定(bind)适配器的问题

javascript - 如何在高阶 javascript 函数中执行变量捕获?

javascript - 函数作为 React 子项无效。如果您返回一个组件而不是从渲染中返回,则可能会发生这种情况

javascript - 如何基于Material ui测试组件?

reactjs - TypeScript:从类型/减法类型中删除键

javascript - 访问从 HOC 返回的组件 Prop - Jest with React