React组件:无法读取未定义错误的属性
问题描述:
我目前在另一个组件中渲染React包装器组件时出现问题。基本上,我包装组件(CreatePage),然后尝试将其导入到另一个组件(EditPage),但出现错误“无法读取未定义的属性pageType
”。 pageType
是我定义的CreatePage的道具,但奇怪的是我在这两个组件的渲染函数中都有调试器,并且都没有被击中,所以我认为由于某种原因组件本身存在问题,但我不确定完全是什么。下面是从EditPage代码的一些背景:React组件:无法读取未定义错误的属性
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>
);
}
}
答
CreatePage正在寻找在this.props.options.pageType
但你只是在pageType为何直接传递..没有一个选项提及托
+1
完全忽略了这个!它正在工作,我真的很感激它:) – user3802348
你能提供CreatePage的代码吗? – Yozi
只需将其添加到帖子中作为编辑。 – user3802348