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，如何解决？

Answer 1

React 15.5.0包含属于React 16上发生的更改的新警告，您收到的警告实际上是告诉您必须实施新方法（因为您当前使用的方式是将被弃用16）。

React.createClass，你有2个选项，第一个是使用普通的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 blog post about those changes

Answer 2

React v15.5.0 实施new warnings

将React降级为 15.4.x 对我有用

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

Answer 3

第v15.5版已弃用

React.createClass和React.PropTypes。

某些Peers / dependencies必须使用React.createClass和React.PropTypes React:^15.4（或任何其他版本），这与您的反应版本非常兼容。所以得到警告代码。

请参阅this link了解15.5更改

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

Answer 4

我发现警告存在是因为我用

导入了React

import * as React from 'react'

将此更改为

import React from 'react'

使警告消失

Answer 5

这不是一个答案，还有一件事要补充，因为我还不能评论:-(也许其他人对react-bootstrap有同样的问题

当使用react-bootstrap 0.30.8和react 15.5.3时，我得到了相同的结果。

警告：不受控制（下拉列表）：不推荐使用React.createClass，将在版本16中将其删除。请改用纯JavaScript类。如果您还没有准备好迁移，可以在npm上使用create-react-class作为替代品。

我进去了：无法控制/ createUncontrollable.js ---＆gt;

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

uncontrollable@4.0.3是react-bootstrap 0.30.8

的dep

和

警告：不建议通过主React包访问PropTypes。请改用npm中的prop-types包。

react-bootstrap / es / PanelGroup.js ---＆gt;

accordion: React.PropTypes.bool

我认为降级反应是解决方法的唯一方法，因为反应引导还不够。

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课程here

在babel反应中禁用React.createClass和PropTypes不推荐使用的警告

6 个答案: