Question

所以我正在关注Udemy关于React的一些教程，其中教师说的是这样的（告诉我们为什么我们的参考不起作用）

“引用的问题是它被转发但引用了错误的组件。包装组件和使用它的组件之间的HOC是”问题“。

我将详细解释我们所做的事情，但如果这句话对你有意义，那么我的问题是声明中的这一部分是什么意思（下）

[问题] 包装组件与使用它的组件之间的HOC

所以这就是我们所做的，我们创建了两个HOC Aux.js - ＆gt; HOC

const aux = (props) => props.children;
export default aux;

和 withClass.js - ＆gt; HOC

const withClass = (WrappedComponent, className) => {
   return class extends Component {
       render () {
           return (
               <div className={className}>
                   <WrappedComponent {...this.props} />
               </div>
           )
       }
   }

然后在我们的JS文件中，在我们的return语句中导入所有必需的东西后，我们做了类似的事情（即用Aux包装我们的组件并作为参数导出到withClass）

      return (
            <Aux>
                <p onClick={this.props.click}>Im {this.props.name} and I am {this.props.age} years old!</p>
                <p>{this.props.children}</p>
                <input type="text" onChange={this.props.changed} value={this.props.name} />
            </Aux>

export default withClass(Person, classes.Person);

我们在两个或三个其他JS文件中做同样的事情（用Aux包装并发送Person，Classes.something） ..

现在，我明白他的回答是参考转发API，我理解他的话的理论含义，但我只是想知道以下行的含义..

包装组件与使用它的组件之间的HOC

Answer 1

HOC，它位于包裹的组件和组件之间使用它

当您使用从HOC创建的组件

时，意味着什么

const withClass = (WrappedComponent, className) => {
   return class extends Component {
       render () {
           return (
               <div className={className}>
                   <WrappedComponent {...this.props} />
               </div>
           )
       }
   }

喜欢

const EnhancedApp = withClass(App);

并将其渲染为

<EnhancedApp ref={this.getRef}/>

你没有在App上提供引用，而是由withClass返回的HOC类实例，正如你所期望的那样指向App，类似

const withClass = (WrappedComponent, className) => {
   return class extends Component {
       render () {
           return (
               <div className={className}>
                   <WrappedComponent ref={this.getRef} {...this.props} />
               </div>
           )
       }
   }

包装组件与使用它的组件之间的HOC

1 个答案: