Question

我很难搞清楚使用High Order组件。

我得到了理论部分，他们将其他元素包装起来以添加功能和代码重复，但我不了解它们是如何工作的。

例如，这里是我创建的一个简单的HOC组件

import React from 'react';

const withClass = (props) = {
  return (
    <div className={props.classes}> {props.children}
    </div>
  )
}

export default withClass;

并在我的容器中的两个地方导入（我们也可以在组件中导入它？）

import withClass from '../hoc/withclass.js';

<withClass className={classes.App}>
  <button onClick={this.showPersonTrueHandler}>Show Persons </button>
  <Ccockpit
  coatiitle = {this.props.title}
  cocPersonState = {this.state.showPerson}
  cocperson = {this.state.person.length}
  toggler = {this.togglerPersonHandler} />
  {person}
  </withClass>

现在，我以前知道我们使用props将属性从父元素传递给子元素？这意味着我们会将classes.App传递给HOC组件，将WithClass Tag内的内容传递给props.child

但我不明白，为什么我们这样做呢？当HOC组件收到props.class和props.child时会发生什么？

反应中的高阶组件

0 个答案: