Javascript 不推荐通过主 React 包访问 PropTypes
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43303761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing PropTypes via the main React package is deprecated
提问by Nedjim DN
I'm using redux but when I run my code I have this error:
我正在使用 redux 但当我运行我的代码时出现此错误：
Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
不推荐通过主 React 包访问 PropTypes。请改用 npm 中的 prop-types 包。
I install
我安装
npm i prop-types -S
npm i prop-types -S
but I I still have the same error.
但我仍然有同样的错误。
./components/action/article.js
./components/action/article.js
import * as ArticleActionTypes from '../actiontypes/article';
export const AddArticle = (name, description, prix, image) => {
return {
type: ArticleActionTypes.ADD_ARTICLE,
name,
description,
prix,
image
}
}
export const RemoveArticle = index => {
return {
type: ArticleActionTypes.REMOVE_ARTICLE,
index
}
}
./components/actiontypes/article.js
./components/actiontypes/article.js
export const ADD_ARTICLE = 'article/ADD_ARTICLE';
export const REMOVE_ARTICLE = 'article/REMOVE_ARTICLE';
export const UPDATE_ARTICLE = 'article/UPDATE_ARTICLE';
./components/reducers/article.js
./components/reducers/article.js
import * as ArticleActionTypes from '../actiontypes/article';
const initialState = [
{
name: 'test',
description: 'test',
prix: 'test',
image: 'url'
},
{
name: 'test',
description: 'test',
prix: test,
image: 'url'
}
]
export default function Article (state=initialState, action){
switch(action.type){
case ArticleActionTypes.ADD_ARTICLE :
return [
...state,
{
name: action.name,
description: action.description,
prix: action.prix,
image: action.image
}
];
case ArticleActionTypes.REMOVE_ARTICLE :
return [
...state.slice(0, action.index),
...state.slice(action.index +1)
] ;
default: return state;
}
}
index.js
索引.js
import React from 'react';
import { render } from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import ArticleReducer from './components/reducers/article';
import Scoreboard from './components/containers/Scoreboard';
const store = createStore(
ArticleReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
render(<Provider>
<Scoreboard store={store}/>
</Provider>, document.getElementById('root'));
./components/containers/Scorboard.js
./components/containers/Scorboard.js
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreactors} from 'redux';
import PropTypes from 'prop-types';
class Scoreboard extends React.Component {
render(){
return (
<div>
Scoreboard
</div>
)
}
}
const mapStateToProps = state => {
{
articles :state
}
}
Scoreboard.propTypes = {
articles: PropTypes.array.isRequired
}
export default connect(mapStateToProps)(Scoreboard);
回答by bvaughn
As others have mentioned- if you have audited your own project for PropTypesuses but you're still seeing the warning- it's likely coming from an upstream dependency. One way you can track down the cause of this warning is by setting a debug breakpoint where it's logged and then stepping back to the caller. Here's a quick example recording I made:
正如其他人所提到的 - 如果您已经审核了自己的项目以供PropTypes使用，但您仍然看到警告 - 它可能来自上游依赖项。您可以追踪此警告的原因的一种方法是在记录它的位置设置调试断点，然后返回到调用方。这是我制作的一个快速示例录音：
(A higher-quality version is available here.)
（此处提供更高质量的版本。）
Once you've identified the library in question, consider filing a Github issue (or better yet- a PR!) to inform the authors of the new warning.
一旦你确定了有问题的库，考虑提交一个 Github 问题（或者更好的 - 一个 PR！）来通知作者新的警告。
In the meanwhile, this is only a dev-mode warning so it should not affect production usage of your application.
同时，这只是一个开发模式警告，因此它不应影响应用程序的生产使用。
回答by Yuval
Since the release of React v15.5.0 React.PropTypes is deprecated and has moved to another library. You should use npm install prop-typesand use PropTypes from there.
自 React v15.5.0 发布以来，React.PropTypes 已被弃用并已移至另一个库。您应该npm install prop-types从那里使用和使用 PropTypes。
The code at ./components/containers/Scorboard.js looks perfectly fine, you probably have a React.PropTypessomewhere else in your code.
./components/containers/Scorboard.js 中的代码看起来非常好，您的代码中可能还有React.PropTypes其他地方。
Another options is that some dependency that you are using is still using it the old way. You can try to update your dependencies but as this deprecation is quite new I doubt that every library had already released an update.
另一种选择是您正在使用的某些依赖项仍在以旧方式使用它。您可以尝试更新您的依赖项，但由于这种弃用是很新的，我怀疑每个库都已经发布了更新。
More details about the PropTypes deprecation here.
有关 PropTypes 弃用的更多详细信息，请点击此处。
UPDATE
更新
It seems like redux has updated it's dependencies to use React v15.5.0 and got rid of the deprecation warnings. It is fixed in v4 and v5 as well.
似乎 redux 已经更新了它的依赖项以使用 React v15.5.0 并摆脱了弃用警告。它也在 v4 和 v5 中得到修复。
回答by enam
I solved this warning this way:
我这样解决了这个警告：
Installed PropTypes
已安装的 PropTypes
# npm install -S prop-types
# npm install -S prop-types
Import PropTypes like this
像这样导入 PropTypes
import PropTypes from 'prop-types';
import PropTypes from 'prop-types';
instead of doing this:
而不是这样做：
import { PropTypes } from 'react';
import { PropTypes } from 'react';
回答by Gerard Brull
Also be sure to import React properly. I had this:
还要确保正确导入 React。我有这个：
import * as React from 'react';
And should be:
并且应该是：
import React from 'react';
This fixed all my warnings.
这修复了我所有的警告。
回答by gpbaculio
Be sure not to use React.PropTypes, sample:
一定不要使用 React.PropTypes，示例：
MyComponent.propTypes = {
MyString: PropTypes.string.isRequired
}
回答by KARTHIKEYAN.A
You can able to fix using upgrade versions
您可以使用升级版本进行修复
npm install --save [email protected] [email protected]
回答by AKV
Resolved this issue by simply running npm install prop-types
只需运行 npm install prop-types 即可解决此问题
