复用库示例实现PayPal按钮后遭遇React createClass弃用警告

这个警告其实很常见——本质是你复用的PayPal按钮示例代码（或者背后依赖的组件）还在使用React.createClass这个旧API，而React从v15.5版本开始就把这个API标记为弃用，v16之后会彻底移除。下面给你两种实用的解决办法，按需选择：

方案一：改用ES6类组件（推荐） #

如果是你自己编写的代码里用到了React.createClass，直接改成ES6类写法是长久之计，完全贴合React的未来发展方向。举个简单的改写示例：

原来的createClass写法：

const PayPalButton = React.createClass({
  render() {
    return (/* 按钮相关渲染内容 */);
  }
});

改成ES6类写法：

import React, { Component } from 'react';

class PayPalButton extends Component {
  render() {
    return (/* 按钮相关渲染内容 */);
  }
}

如果是第三方PayPal组件的问题，先去查查有没有更新版本——现在主流的React组件都已经迁移到ES6类或者函数组件了，升级组件版本通常就能直接解决警告问题。

方案二：使用create-react-class兼容包（临时过渡） #

如果暂时没法升级组件或者大规模修改代码，React官方提供了一个临时兼容包create-react-class，可以完美替代旧的React.createClass：

1. 先安装这个包：

   # 使用npm
   npm install create-react-class --save
   
   # 或者使用yarn
   yarn add create-react-class
   

2. 然后在用到createClass的地方替换引用：

   import createReactClass from 'create-react-class';
   
   const PayPalButton = createReactClass({
     render() {
       return (/* 按钮相关渲染内容 */);
     }
   });
   

要是第三方组件内部偷偷用了React.createClass，你还可以通过webpack的别名配置，全局把React.createClass指向这个兼容包：
在webpack配置文件里添加：

resolve: {
  alias: {
    'react/lib/ReactCreateClass': 'create-react-class'
  }
}

这样不用修改第三方代码就能消除警告。

小提示 #

优先选方案一，因为ES6类是React现在和未来的标准写法，兼容性更好，也更容易维护。方案二只是临时过渡的权宜之计，适合那些暂时没法大规模调整代码的场景。

内容的提问来源于stack exchange，提问作者RamiroIsBack