Javascript 在 babel react 中禁用 React.createClass 和 PropTypes 弃用警告
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43289348/
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
Disable React.createClass and PropTypes deprecated warnings in babel react present
提问by TangMonk
At latest React 15.5.1 package, If using babel react present to resolve jsx file, will appears following warnings:
在最新的 React 15.5.1 包中，如果使用 babel react present 来解析 jsx 文件，会出现以下警告：
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
warning.js:36 Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
My code is following:
我的代码如下：
import React from 'react'
import ReactDOM from 'react-dom';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 1
}
}
componentDidMount() {
setInterval( ()=> {
this.setState((prevState, props) => ({
count: prevState.count + 1
}))
}, 1000)
}
render(){
return (
<h1>{this.state.count}</h1>
)
}
}
const root = document.createElement('div');
root.id = 'app';
document.body.appendChild(root);
ReactDOM.render(
<Counter />,
document.querySelector('#app')
);
I am not using React.createClass and PropTypes in my code, It seems babel transform my code to React.createClassand PropTypes, How to fix that?
我没有在我的代码中使用 React.createClass 和 PropTypes，似乎 babel 将我的代码转换为React.createClass和PropTypes，如何解决这个问题？
回答by Idan Gozlan
React 15.5.0 contain new warnings belong to the changes that are coming on React 16, the warning that you are getting, is actually telling you that you have to implement the new way (since the current way that you are using is going to be deprecated on 16).
React 15.5.0 包含属于 React 16 即将发生的变化的新警告，您收到的警告实际上是在告诉您必须实施新方式（因为您当前使用的方式将是16 日弃用）。
React.createClass, you have 2 options, first one is to just use plain JS syntax:
React.createClass，你有 2 个选项，第一个是只使用普通的 JS 语法：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
or use the create-react-classmodule (availiable on npm):
或使用create-react-class模块（可在 npm 上使用）：
// Before (15.4 and below)
var React = require('react');
var Component = React.createClass({
mixins: [MixinA],
render() {
return <Child />;
}
});
// After (15.5)
var React = require('react');
var createReactClass = require('create-react-class');
var Component = createReactClass({
mixins: [MixinA],
render() {
return <Child />;
}
});
About the PropTypes warning, check if you are using module that using PropTypes, sometimes it's coming from external part.
关于 PropTypes 警告，检查您是否正在使用使用 PropTypes 的模块，有时它来自外部部分。
Anyway, to read more about it, you are welcome to get Facebook blog post about those changes
无论如何，要了解更多信息，欢迎您获取有关这些更改的 Facebook 博客文章
回答by Vituzan Siva
React v15.5.0implements new warnings
React v15.5.0实现新警告
Downgrading React to 15.4.xworks for me
将 React 降级到15.4.x对我有用
npm install --save [email protected] [email protected]
回答by Ivo Bosticky
I found that the warning was present because I was importing React with
我发现存在警告是因为我正在导入 React
import * as React from 'react'
changing this to
将此更改为
import React from 'react'
makes the warnings disappear
使警告消失
回答by Vikas Sardana
React.createClassand React.PropTypeshas been deprecated in v15.5.
React.createClass并React.PropTypes已在 v15.5 中弃用。
Some Peers/dependencies must be using React.createClassand React.PropTypeswith React:^15.4(or any other version), which is very much compatible with your react version.
So getting Warning for there code.
某些 Peers/dependencies 必须使用React.createClass和React.PropTypes使用React:^15.4（或任何其他版本），这与您的 React 版本非常兼容。所以得到那里代码的警告。
Please refer this linkfor 15.5 Changes
请参阅此链接以了解 15.5 更改
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html
回答by davey
This is not an answer, just one more thing to add, as I can not yet comment :-( Maybe someone else have same issue with react-bootstrap
这不是答案，只是要补充一件事，因为我还不能发表评论:-( 也许其他人对 react-bootstrap 有同样的问题
I got the same when using react-bootstrap 0.30.8 together with react 15.5.3.
我在使用 react-bootstrap 0.30.8 和 react 15.5.3 时得到了相同的结果。
Warning: Uncontrolled(Dropdown): React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
警告：不受控制（下拉）：不推荐使用 React.createClass 并将在版本 16 中删除。请改用纯 JavaScript 类。如果您还没有准备好迁移，可以在 npm 上使用 create-react-class 作为替代品。
I get in: uncontrollable/createUncontrollable.js --->
我进入：uncontrollable/createUncontrollable.js --->
var component = _react2.default.createClass(_extends({
[email protected] is a dep of react-bootstrap 0.30.8
[email protected] 是 react-bootstrap 0.30.8 的一个 dep
and
和
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
警告：不推荐通过主 React 包访问 PropTypes。请改用 npm 中的 prop-types 包。
react-bootstrap/es/PanelGroup.js --->
react-bootstrap/es/PanelGroup.js --->
accordion: React.PropTypes.bool
I think downgrading react is the only way to workaround here, as react-bootstrap is not yet far enough.
我认为降级 react 是解决此问题的唯一方法，因为 react-bootstrap 还远远不够。
回答by N. Solomon
You should not be extending react.Component. You need to import Component from react and extend it has shown here:
你不应该扩展 react.Component。您需要从 react 中导入 Component 并扩展它，如下所示：
import React, {Component} from 'react';
class Counter extends Component{
//your code here
render (){
return (
<h1>{this.state.count}</h1>
);
}
}
You can read about the differences and ES6 classes here
您可以在此处阅读差异和 ES6 类
