反应组件：无法读取未定义错误的属性

Question

我目前在另一个组件中渲染 React 包装器组件时遇到问题。基本上，我 export default 包装组件 (CreatePage)，然后尝试将其导入另一个组件 (EditPage)，但收到错误“无法读取未定义的属性 pageType”。 pageType 是我定义的 CreatePage 的一个道具，但奇怪的是我在两个组件的渲染函数中都有调试器，而且都没有被命中，所以我认为组件本身存在问题，但我是不太确定是什么。以下是 EditPage 中某些上下文的代码：

import React, { Component, PropTypes } from 'react';
import CreatePage from './CreatePage';
import withResource from '../../../../lib/withResource';


export class EditPage extends Component {
    constructor(props){
        super(props);
    }

    render() {
        debugger;
        return (
            <div>
                <CreatePage pageType={'edit'}/>
            </div>
        );
    }
}

export default withResource(
{
    name: 'EditResource',
    key: 'hello',
    }, 
EditPage);

CreatePage 的代码：

export default class CreatePage extends Component {

    constructor(props) {
        super(props);
    }

    headerTitles = {
        'create': i18n._('Create', '[m10n]'),
        'edit': i18n._('Edit', '[m10n]'),
    }

    renderHeader(pageType) {
        return (
            <div className={cx('headerWrapper')}>
                <div className={cx('header')}>
                    <div className={cx('title')}>
                        {this.headerTitles[pageType]}
                    </div>
                </div>
            </div>
        );
    }

    renderCreateEditPage(pageType) {
        return (
            <div>
                {this.renderHeader(pageType)}
                <div className={cx('contentWrapper')}>
                    <div>
                        <NameTag type={'pageType'}/>
                    </div>
                </div>
            </div>
        );
    }

    render() {
        return (
            <div className={cx('pageWrapper')}>
                {this.renderCreateEditPage(this.props.options.pageType)}
            </div>
        );
    }
}

Answer 1

CreatePage 正在查看 this.props.options.pageType，但您只是直接传入 pageType.. 没有提及选项道具