时间戳

首页 > 解决方案 > 为高阶组件传递两次道具？

javascript - 为高阶组件传递两次道具？

问题描述

我正在构建一个网页，并实现了每个组件共享的通用样式（相同的背景、边框和标题样式）。所以我想我应该做一个 HOC，它接受每个组件的内部内容以及标题，并返回一个包装这个内部组件和标题的外部组件。起初我遇到了很多问题，试图让它工作，是 React 的新手，但现在它终于工作了，但我仍然不明白如何。

这是我的 HOC

const BaseBlock = (WrappedComponent) => {
  return class BaseBlock extends Component {
    render () {
      return (
        <div className={styles['base-block']}>
          <div className={styles['container']}>
            <div className={styles['base-block-head']}>
              { this.props.title }
            </div>
            <div className={styles['base-block-body']}>
              <WrappedComponent {...this.props} />
            </div>
          </div>
        </div>
      )
    }
  }
}

export default BaseBlock

这是 WrappedComponent：

const HighlightsBlock = (props) => {
  return <ListsComponent items={props.items} />
}

export default BaseBlock(HighlightsBlock)

这是 ListsComponent

const ListsComponent = (props) => {
  if (props.items) {
    return (
      <ul className={styles['styled-list']}>
        {props.items.map((item, idx) => {
          return (
            <li key={idx} className={styles['styled-list-item']}>{item}</li>
          )
        })}
      </ul>
    )
  } else return (
    <h3>No highlights</h3>
  )
}

export default ListsComponent

这就是我在应用程序中使用组件的方式：

<HighlightsBlock items={this.getHighlights()} title='Highlights' />

现在，我可以看到 HighlightsBlock 组件接收道具两次（一次是在我的带有道具的应用程序中使用它时，一次在 HOC Baseblock 中作为 WrappedComponent 使用）。如果我从其中任何一个地方移除道具，它就会停止工作。我不明白这是如何工作的。

标签： javascriptreactjs

解决方案

当您渲染时，<HighlightsBlock items={this.getHighlights()} title='Highlights' />您实际上是在渲染 HOC 返回的组件，这反过来又将您的实际HighlightsBlock组件渲染为<WrappedComponent {...this.props} />

您可以认为 HighlightsBlock 组件嵌套了两层深，因此您需要将 props 传递给它，首先{...this.props}从内部传递HOC，然后将其作为函数组件中的 props 接收

推荐阅读