Javascript 禁用babel React present中React.createClass和PropTypes不推荐的警告

如果使用babel React present解析jsx文件，最新的React 15.5.1包将出现以下警告：

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.

我的代码如下：

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')
);

从“React”导入React
从“react dom”导入react dom；
类计数器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：1
}
}
componentDidMount（）{
设置间隔（（）=>{
this.setState（（prevState，props）=>({
计数：prevState.count+1
}))
}, 1000)
}
render（）{
返回(
{this.state.count}
)
}
}
const root=document.createElement（'div'）；
root.id='app'；
document.body.appendChild（根）；
ReactDOM.render(
,
document.querySelector（“#app”）
);

---

我没有在代码中使用React.createClass和PropTypes，似乎babel将我的代码转换为React.createClass和PropTypes，如何解决这个问题？

您不应该扩展React.Component。您需要从react导入组件并对其进行扩展，如下所示：

  import React, {Component} from 'react';

  class Counter extends Component{
  //your code here
  render (){

    return (
       <h1>{this.state.count}</h1>
    );
   }
}

import React，{Component}来自'React'；
类计数器扩展组件{
//你的代码在这里
渲染（）{
返回(
{this.state.count}
);
}
}

---

您可以阅读这些差异，并且ES6类在v15.5中已被弃用

某些对等方/依赖项必须将

React.createClass

和

React.PropTypes

与

React:^15.4

（或任何其他版本）一起使用，这与您的React版本非常兼容。 因此，这些代码会得到警告

请参阅第15.5节的更改

---

这不是答案，只是要补充一点，因为我还不能评论：-（也许其他人对react引导也有同样的问题

我在使用react引导程序0.30.8和react 15.5.3时得到了相同的结果

警告：Uncontrolled（Dropdown）：React.createClass已弃用，将在版本16中删除。请改用普通JavaScript类。如果您尚未准备好迁移，则可以在npm上作为drop-in替代品使用create React类

我进去了： 无法控制/createUncontrolable.js-->

uncontrollable@4.0.3是react引导程序0.30.8的dep

及

警告：不推荐通过主React包访问PropTypes。请改用npm中的PropTypes包

react bootstrap/es/PanelGroup.js-->

---

我认为降级react是解决此问题的唯一方法，因为react引导还远远不够。

reactv15.5.0实现

降级对15.4.x的反应对我来说很有效

npm install --save react@15.4.0 react-dom@15.4.0

---

React 15.5.0包含新的警告，这些警告属于React 16上即将发生的更改，您得到的警告实际上是告诉您必须实现新的方法（因为您正在使用的当前方法将在React 16上被弃用）

---

React.createClass

，您有两个选项，第一个是只使用纯JS语法：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

关于PropTypes警告，请检查您是否正在使用使用PropTypes的模块，有时它来自外部部件

---

无论如何，要了解更多信息，欢迎您获取

我发现出现警告是因为我正在导入React with

import * as React from 'react'

将此更改为

import React from 'react'

---

使警告消失

您确定它来自此代码吗？babeljs.io似乎不这么认为。请访问。您使用的是什么版本的Babel？我目前在新安装的npm软件包中遇到了相同的问题。我想这可能是一些重大更改的结果？？？如果不推荐警告是正确的，那就太好了dev控制台中的低而不是红色。您能否解释一下有关

类MyComponent extends React.Component

vs

类MyComponent extends Component

。Solomon@SiddharthTrivedi-如果使用react导入组件，则可以使用该组件。例如：

import react，{Component}从“react”；

您基本上只是从react中提取组件，因为react.Component也是正确的。难以置信，通过更新到新版本5，错误警告已经消失了。@eugen_sunic-什么的版本5？您更新了什么？react dom包。。它不是版本5，我是说它删除了5个错误您还可以使用es6类es来定义组件最佳答案，因为这与开发工具控制台中的建议是一致的。通过主React包访问createClass不受欢迎，将在React v16.0中删除。请改用普通JavaScript类。如果您还没有准备好迁移，请在npm上创建React类v15.*作为临时替代品提供t、 使用Flow时，其他导入是必要的。这里有一个不同的Jest解决方案：

// 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 />;
  }
});

import * as React from 'react'

import React from 'react'