1

我试图理解这个 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}/>
 }
}

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

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

据我了解，“this”指的是 PP 的实例？所以我们用 PP 的 props 实例化 WrappedComponent，它们是 React.Component 的 props，对吗？我确实了解我们也将 newProps 添加到这些道具中，但我只是不明白我们在这里用 this.props 做什么。

此外，PP 的构造函数正在获取一些道具作为参数。PP究竟是如何实例化的？ppHOC(MyComponent) 返回的类 PP 不是它的一个实例，对吗？为了实例化 PP，您必须执行“ppHOC(MyComponent)(someProps)”之类的操作？

4

1 回答 1

0

据我了解，“this”指的是 PP 的实例？

是的，这是正确的

所以我们用 PP 的 props 实例化 WrappedComponent，它们是 React.Component 的 props，对吗？

差不多了，这样想，这是你在 HOC 之前的反应结构： 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

此外，PP 的构造函数正在获取一些道具作为参数。PP究竟是如何实例化的？ppHOC(MyComponent) 返回的类 PP 不是它的一个实例，对吗？为了实例化 PP，您必须执行“ppHOC(MyComponent)(someProps)”之类的操作？

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

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

简而言之，{...this.props}就是将它（HOC）收到的任何道具传递给包装的组件

于 2018-07-13T00:45:27.410 回答