Question

我找不到很多有用的React高阶 - 组件（HOC）示例，而且存在的简单示例非常简单，它们甚至不会划分使用或不能使用的表面HOC的。无论如何，从我能找到的，我尝试了以下内容，我确信我正在讨论某些事情（可能很明显），因为这是我尝试使用HOC的第一次尝试：

HOC：

import { Component, PropTypes } from 'react'

export const WizardWrapper = Step => class extends Component {
  constructor(props) {
    super(props)
    this.nextPage = this.nextPage.bind(this)
    this.previousPage = this.previousPage.bind(this)
    this.state = {
      page: 1
    }
  }

  nextPage() {
    this.setState({ page: this.state.page + 1 })
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 })
  }

  goToPage(page) {
    this.setState({ page })
  }

  render() {
    const { onSubmit, submitButtonText, step} = this.props
    let hasNext = this.props.step > this.state.page
    let hasPrev = this.state.page < this.props.step
    let nextText = hasNext ? 'Next' : submitButtonText
    return (
      <Step previousPage={hasPrev ? this.previousPage : null}
        onSubmit={hasNext ? this.nextPage : onSubmit}
        {...this.state} {...this.props}/>
    )
  }
}

某些组件：

export const WizardPage = (props) => <h1>Some page</h1>

尝试显示包装组件（即使包装它实际上并没有做任何事情）：

import { Component, PropTypes } from 'react'
import {WizardWrapper} from 'common/client/components/wizard/WizardWrapper'
import {WizardPage} from 'common/client/components/wizard/WizardPage'

export default class FormTest extends Component {
  render() {
    let WrapperPage = WizardWrapper(WizardPage)
    return (
      <div>
        {WrapperPage}
      </div>
    )
  }
}

我没有收到任何错误，但也没有显示任何错误。我有什么想法或错误的想法？

TIA！

Answer 1

如果其他人遇到这种情况，在我的情况下，我开始看到浏览器控制台日志：

maxAge 50 1 VM611:1 
maxAge 50 2 VM611:1 
maxAge 50 3 VM611:1

我做了一些挖掘，发现这些可能来自NPM的LRU缓存，所以我从控制台运行npm cache clean。错误消失了，我的HOC终于开始按预期显示了。显然，腐败的NPM缓存是罪魁祸首。

React HOC不显示包装组件

1 个答案: