在Babel React Present中禁用React.createClass和PropTypes弃用警告

Question

在最新的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.

我的代码如下：

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.createClass和PropTypes，但似乎babel将我的代码转换为React.createClass和PropTypes，如何解决？

- TangMonk

---

你确定这个问题是由这段代码引起的吗？babeljs.io 似乎并不这么认为；这个 gist 显示了你的源代码和 babeljs 的输出。请前往 https://babeljs.io/repl 查看。你使用的 Babel 版本是什么？ - Dave Newton

我目前遇到了新安装的npm包相同的问题。我猜测这可能是由于一些重大变更所导致的？ - Maciej Sitko

在开发控制台中，如果弃用警告是黄色而不是红色就更好了。 - Isaac Pak

Answer 1

React 15.5.0包含与即将到来的React 16有关的新警告，您收到的警告实际上是在告诉您必须实现新的方式（因为您当前使用的方式将在16版本中被弃用）。

React.createClass，您有两个选项，第一个是只使用纯JS语法:

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

或者使用 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 />;
  }
});

关于 PropTypes 的警告，请检查您是否在使用使用 PropTypes 的模块，有时这可能来自外部部分。

无论如何，要了解更多信息，请查看Facebook关于这些更改的博客文章

- Idan Gozlan

---

你也可以使用ES6类来定义组件。 - Isaac Pak

这是一个非常准确的建议，最佳答案。通过主要的React包访问createClass已经被弃用，并将在React v16.0中删除。请改用普通的JavaScript类。如果您还没有准备好进行迁移，则可以使用create-react-class v15.*作为npm上的临时替代品。 - Chad

Answer 2

React v15.5.0 实现了新的警告

对我来说，将 React 降级到15.4.x是可行的。

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

- Vituzan Siva

---

令人难以置信的是，通过升级到新版本5，错误警告已经消失了。 - EugenSunic

@eugen_sunic - 第五个版本是什么？你更新了什么？ - Giladd

React DOM 包不是版本 5，我是说它已经修复了 5 个错误。 - EugenSunic

Answer 3

我发现警告存在是因为我使用了以下方式导入React：

import * as React from 'react'

将此更改为

import React from 'react'

使警告消失

- Ivo Bosticky

---

当使用Flow时，其他导入是必要的。这里有一个Jest的不同解决方法：https://gist.github.com/turadg/9bcf08a7279e82a030a645250639fe6e - Turadg

Answer 4

React.createClass和React.PropTypes在v15.5版本中已被弃用。

一些同行/依赖项可能正在使用React:^15.4（或任何其他版本）与React.createClass和React.PropTypes，这非常兼容您的React版本。所以会收到针对它们代码的警告。

请参考此链接查看有关15.5更改的详细信息。

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

- Vikas Sardana

Answer 5

这不是答案，只是要补充一点，因为我还不能评论 :-( 也许其他人在使用react-bootstrap时有相同的问题

当我使用react-bootstrap 0.30.8和react 15.5.3时遇到了相同的问题。

警告：Uncontrolled(Dropdown)：React.createClass已被弃用并将在版本16中删除。请改用普通JavaScript类。如果您还没有准备好迁移，请使用create-react-class作为npm上的替代品。

我进入了： uncontrollable/createUncontrollable.js --->

var component = _react2.default.createClass(_extends({

uncontrollable@4.0.3 是 react-bootstrap 0.30.8 的依赖

以及

警告：通过主要的 React 包访问 PropTypes 已经被弃用。请改用来自 npm 的 prop-types 包。

react-bootstrap/es/PanelGroup.js --->

accordion: React.PropTypes.bool

我认为降级React是解决这个问题的唯一办法，因为react-bootstrap还不够完善。

- davey

Answer 6

你不应该扩展react.Component。你需要从react中导入Component并像这里所示一样进行扩展：

  import React, {Component} from 'react';

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

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

你可以在这里阅读有关ES6类的差异。

- N. Solomon

---

你能详细解释一下 class MyComponent extends React.Component 和 class MyComponent extends Component 的区别吗？@N. Solomon - aquaman

@SiddharthTrivedi - 如果你在React中导入Component，你可以使用它。例如：import React, { Component } from 'react'; - Steph

你基本上只是从 React 中提取了 Component，因为 React.Component 也是正确的。 - Juni Brosas