我收到此错误并且不知道什么是错的,我的代码很简单我只是想推送一个数组。是如此基本但却无法弄清楚。
我正在使用Meteor 1.5.3和React 16
import React, { Component, PropTypes } from 'react';
export default class ListMeds extends Component {
render(){
return(
<li>{this.props.meds.text}</li>
);
}
}
ListMeds.propTypes = {
meds: React.PropTypes.object.isRequired,
};
答案 0 :(得分:5)
出现此错误是因为您使用的是第16版React.js。 In this博客文章(宣布React.js版本16)您可以阅读:
15.x中引入的弃用已从核心中删除 包。 React.createClass现在可用作create-react-class, React.PropTypes作为prop-types ...
您应该安装prop-types模块(如果您使用npm
):
npm install --save prop-types
或
yarn add prop-types
代表yarn
案例。并以这种方式重写您的代码:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class ListMeds extends Component {
render(){
return(
<li>{this.props.meds.text}</li>
);
}
}
ListMeds.propTypes = {
meds: PropTypes.object.isRequired,
};
答案 1 :(得分:1)
如果您使用的是React 15+,则需要单独导入prop-types
包。您的代码应为:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class ListMeds extends Component {
render(){
return(
<li>{this.props.meds.text}</li>
);
}
}
ListMeds.propTypes = {
meds: React.PropTypes.object.isRequired,
};
请注意,错误显示“未定义的对象”,这意味着React.PropTypes
未定义。
答案 2 :(得分:0)
来自React docs,
注意:自React以来,React.PropTypes已移入另一个包中 V15.5。请改用prop-types库。我们提供了一个codemod 用于自动转换的脚本。
见https://reactjs.org/docs/typechecking-with-proptypes.html
道具类型库:https://github.com/facebook/prop-types
安装软件包并将其导入代码中。
答案 3 :(得分:0)
接受的答案正确地指出prop-types现在是它自己的包,我只是想补充一点,如果你正在编写ES6类并且已经使用了ES6 +功能,那么将PropTypes设置为静态变量可能更为惯用。类本身(注意:这适用于使用具有适当预设的Babel的环境)。
export default class ListMeds extends Component {
static propTypes = {
// propTypes
}
render() {
// etc
}
}
Instagram工程师在React and ES6+上写了一篇很棒的帖子。您可以查看课程字段here的提案和所有提案here。
答案 4 :(得分:0)
我遇到了同样的问题..并解决了这个问题:
import React, { Component, PropTypes } from 'react';
export default class ListMeds extends Component {
render(){
return(
<li>{this.props.meds.text}</li>
);
}
}
ListMeds.propTypes = {
meds: PropTypes.object.isRequired,
}
答案 5 :(得分:0)
我将展示一个关于如何将 React.PropTypes.object 更改为 PropTypes.object 以解决显示的所有错误的示例。代码源链接是:
import React, { Component } from 'react';
import {
localParticipantJoined,
localParticipantLeft
} from '../../base/participants';
import {
appNavigate,
appWillMount,
appWillUnmount
} from '../actions';
/**
* Default config.
*
* @type {Object}
*/
const DEFAULT_CONFIG = {
configLocation: './config.js',
hosts: {
domain: 'meet.jit.si'
}
};
/**
* Base (abstract) class for main App component.
*
* @abstract
*/
export class AbstractApp extends Component {
/**
* AbstractApp component's property types.
*
* @static
*/
static propTypes = {
config: React.PropTypes.object,
store: React.PropTypes.object,
/**
* The URL, if any, with which the app was launched.
*/
url: React.PropTypes.string
}
/**
* Init lib-jitsi-meet and create local participant when component is going
* to be mounted.
*
* @inheritdoc
*/
componentWillMount() {
const dispatch = this.props.store.dispatch;
dispatch(appWillMount(this));
dispatch(localParticipantJoined());
const config
= typeof this.props.config === 'object'
? this.props.config
: DEFAULT_CONFIG;
this._openURL(this.props.url || `https://${config.hosts.domain}`);
}
/**
* Dispose lib-jitsi-meet and remove local participant when component is
* going to be unmounted.
*
* @inheritdoc
*/
componentWillUnmount() {
const dispatch = this.props.store.dispatch;
dispatch(localParticipantLeft());
dispatch(appWillUnmount(this));
}
/**
* Create a ReactElement from the specified component, the specified props
* and the props of this AbstractApp which are suitable for propagation to
* the children of this Component.
*
* @param {Component} component - The component from which the ReactElement
* is to be created.
* @param {Object} props - The read-only React Component props with which
* the ReactElement is to be initialized.
* @returns {ReactElement}
* @protected
*/
_createElement(component, props) {
/* eslint-disable no-unused-vars, lines-around-comment */
const {
// Don't propagate the config prop(erty) because the config is
// stored inside the Redux state and, thus, is visible to the
// children anyway.
config,
// Don't propagate the dispatch and store props because they usually
// come from react-redux and programmers don't really expect them to
// be inherited but rather explicitly connected.
dispatch, // eslint-disable-line react/prop-types
store,
// The url property was introduced to be consumed entirely by
// AbstractApp.
url,
// The remaining props, if any, are considered suitable for
// propagation to the children of this Component.
...thisProps
} = this.props;
/* eslint-enable no-unused-vars, lines-around-comment */
// eslint-disable-next-line object-property-newline
return React.createElement(component, { ...thisProps, ...props });
}
/**
* Navigates this AbstractApp to (i.e. opens) a specific URL.
*
* @param {string} url - The URL to which to navigate this AbstractApp (i.e.
* the URL to open).
* @protected
* @returns {void}
*/
_openURL(url) {
this.props.store.dispatch(appNavigate(url));
}
}
修改后的代码有如下添加
yarn add prop-types
import PropTypes from 'prop-types';
export class AbstractApp extends Component {
/**
* AbstractApp component's property types.
*
* @static
*/
static propTypes = {
config: PropTypes.object,
store: PropTypes.object,
/**
* The URL, if any, with which the app was launched.
*/
url: PropTypes.string
}
}