React HOC не отображает обернутый компонент

Существует не так много полезных примеров React Higher-Order-Component (HOC), которые я мог найти, а простые, которые существуют, настолько упрощены, что на самом деле они даже не царапают поверхность того, что может или не может быть выполнена с использованием HOC. Во всяком случае, от того, что я мог бы найти, я попытался следующие, и я уверен, что я mssing что-то (вероятно, очевидно), потому что это моя первая попытка попробовать и использовать HOC-х:React 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!

источник

2016-04-12 D Durham

Я только что проверил это, и он отлично работает для меня. Единственное, что может отсутствовать, это «import React» в ваших компонентах, если у вас нет какой-то глобальной вещи. Буквально я скопировал и вставил ваш точный код, и он работает. – azium

Спасибо, но теперь я действительно озадачен, почему это не для меня. Реакт псевдоглобальный для меня, потому что я также использую Метеор. Хорошо, я еще сыграю и посмотрю, смогу ли я это понять. Спасибо за ответ! –

В случае, если кто-то работает в этом, в моем случае, я начал видеть браузер консоль журналы с:

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

Я сделал некоторые раскопки и выяснил, они, вероятно, были приходить из кэша LRU НОГО, поэтому я побежал npm cache clean с консоли. Ошибки исчезли, и мои HOC наконец начали показывать, как ожидалось. По-видимому, виновным оказался поврежденный кэш НПМ.

источник

2016-04-13 02:05:03

React HOC не отображает обернутый компонент

ответ

Смежные вопросы