javascript - 在 babel react 中禁用 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，如何解决？

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 blog post about those changes