无法理解 HOC 中如何访问 props

Question

我正在尝试理解 HOC 的这个基本示例：

function ppHOC(WrappedComponent) {

 return class PP extends React.Component {

    constructor(props) {
      super(props)
      this.state = {
        name: ''
      }

    this.onNameChange = this.onNameChange.bind(this)
 }

 onNameChange(event) {
  this.setState({
    name: event.target.value
  })
 }

 render() {
  const newProps = {
    name: {
      value: this.state.name,
      onChange: this.onNameChange
    }
  }
  return <WrappedComponent {...this.props} {...newProps}/>
 }
}

令我烦恼的是 return 语句中 this.props 的使用：

return <WrappedComponent {...this.props} {...newProps}/>

据我了解"this"指的是PP实例？所以我们用 PP 的道具实例化 WrappedComponent，这是 React.Component 的道具，我说得对吗？我确实理解我们还向这些道具添加了新道具，但我只是不明白我们在这里用 this.props 做了什么。

此外，PP 的构造函数正在获取一些道具作为参数。 PP具体是怎么实例化的？ pPHOC(MyComponent) returns class PP 不是它的一个实例，对吧？为了实例化 PP 你必须做类似 "ppHOC(MyComponent)(someProps)" ?

Answer 1

From what I understand "this" refers to the instance of PP ?

是的，没错

So we are instanciating WrappedComponent with the props of PP which are the props of React.Component, am I right ?

差不多了，这样想，这是你在HOC之前的react结构： Parent component passes `props` to Child component

现在你用 HOC (ppHOC(Child)) 包装你的 Child 你的结构变成： Parent component passes `props` to the component returned from `ppHOC(Child)`, which is class PP

Also the constructor of PP is getting some props as parameters. How is PP instanciated exactly ? ppHOC(MyComponent) returns the class PP not really an instance of it right ? In order to instanciate PP you would have to do something like "ppHOC(MyComponent)(someProps)" ?

确实ppHOC(MyComponent) returns the class PP，当你开始使用它时，它会被React启动（渲染）<MyComponentHOC some="prop" />。

PP现在启动，{ some: "prop" }将在PP的constructor(props)中传递，然后通过(...this.props)

传递给你的WrappedComponent

简而言之，{...this.props}就是把它接收到的任何props（HOC）传递给被包裹的组件

无法理解 HOC 中如何访问 props

Trouble understanding how props are accessed in HOC

wrapper

reactjs

react-props

high-order-component