Question

我从site了解高阶组件，但不了解this在其中的工作原理。看下面的内容，构造函数中的this是指返回的内容，就像在最终生成的组件中一样？ this中的{...this.props}是Connect组件？ this如何在这里引用2个不同的东西？

无状态组件

const Greeting = ({ name }) => {
  if (!name) { return <div>Connecting...</div> }

  return <div>Hi {name}!</div>
}

高阶组件

const Connect = ComposedComponent =>
  class extends React.Component {
    constructor() {
      super()
      this.state = { name: "" }
    }

componentDidMount() {
  // this would fetch or connect to a store
  this.setState({ name: "Michael" })
}

render() {
  return (
    <ComposedComponent
      {...this.props}
      name={this.state.name}
    />
  )
}

}

Answer 1

是构造函数中的这个，指的是返回的内容，就像在最终生成的组件中一样？在{... this.props}中的这个是连接组件吗？

Connect是一个功能，而不是一个组件 Connect是接收ComposedComponent的函数并返回一个新的Component。 this引用适用于返回的（父）组件。在构造函数中，它初始化了该组件的状态，并在render中通过了它的＆＃39;支持ComposedComponent。

“this”如何在更高阶的组件中工作？

1 个答案: