简体   繁体   English

React组件:无法读取未定义错误的属性

[英]React component: cannot read property of undefined error

I am currently having a problem rendering a React wrapper component in another component. 我目前在另一个组件中渲染React包装器组件时遇到问题。 Basically, I export default the wrapper component (CreatePage), and then try to import it into another component (EditPage), but am getting the error "Cannot read property pageType of undefined." 基本上,我export default的包装器组件(CreatePage),然后尝试将其导入到另一个组件(EditPage),但是出现错误“无法读取未定义的属性pageType ”。 pageType is a prop for CreatePage that I define, but the weird thing is I have debuggers in the render functions of both Components and neither is being hit, so I think there's an issue with the component itself for some reason but I'm not sure quite what. pageType是我定义的CreatePage的道具,但是很奇怪的是我在两个Components的渲染函数中都有调试器,并且都没有被击中,所以我认为由于某种原因组件本身存在问题,但是我不确定相当。 Here is the code from the EditPage for some context: 这是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);

Code for CreatePage: 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>
        );
    }
}

CreatePage正在this.props.options.pageType中查找,但您只是直接传递了pageType。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM