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

Question

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

这是我的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基块中作为WrappedComponent）。如果我从这些地方移除道具，它就会停止工作。我不明白这是怎么回事。

Answer 1

这是因为这一行中的this.get突出显示（），

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

每次将props传递给子组件时，都会执行此函数。

要解决此问题，请在父组件中维护一个状态值，并在getHighlights函数中设置该值，如，

getHighlights(){
 //you logic to get data
 this.setState({items:data.items}); //considering `data` is object which has `items`
}

现在您可以传递如下项：，

<HighlightsBlock items={this.state.items} title='Highlights' />

Answer 2

渲染

您可以认为Highlight sBlock组件嵌套了两层深，因此您需要将道具传递给它，首先作为{...this.props}从HOC中，然后将其作为道具接收功能组件