这在高阶分量中是如何工作的

How does `this` work in higher order components?

本文关键字：工作 何工作 高阶 分量      更新时间：2023-09-26

我正在从这个网站学习高阶组件，但不知道this是如何在其中工作的。看看下面，构造函数中的this是否指的是返回的内容，就像在最终结果组件中一样?{...this.props}中的this是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}
    />
  )
}

}

构造函数中的this是否指的是返回的内容，就像在最终结果组件中一样?这个在{…这个里面。props}是Connect组件?

Connect是一个函数，不是一个组件。
Connect是一个接收ComposedComponent并返回一个新组件的函数。this引用用于返回的(父)组件。在构造函数中，它初始化组件的状态，在render中，它将它的props传递给ComposedComponent。

相关文章：