React报错求助：Uncaught TypeError: React.createClass is not a function

嘿，这个问题我太熟啦！你遇到的Uncaught TypeError: React.createClass is not a function错误，核心原因很简单：你用的React 16版本已经彻底移除了React.createClass这个旧API——这个方法是React早期用来定义组件的方式，从React 16开始就不再内置支持了。

给你两种靠谱的解决思路，按需选择：

方案一：改用ES6类组件（推荐，现在的标准写法） #

这是目前React官方主推的组件定义方式，完美替代旧的createClass。举个直观的例子：

原来的旧代码（会触发报错） #

const MyComponent = React.createClass({
  getInitialState() {
    return { count: 0 };
  },
  render() {
    return <div>Count: {this.state.count}</div>;
  }
});

改成ES6类组件 #

class MyComponent extends React.Component {
  // 初始化状态（方式一：构造函数）
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  // 或者用更简洁的类字段写法（需要Babel支持）
  // state = { count: 0 };

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

如果你的组件需要处理事件绑定，原来createClass会自动绑定this，ES6类里需要手动处理——要么在构造函数里绑定，要么用箭头函数定义方法：

class MyComponent extends React.Component {
  state = { count: 0 };

  // 箭头函数自动绑定this，不用额外处理
  handleClick = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

方案二：继续使用createClass（仅兼容旧代码时用，不推荐） #

如果你有大量旧代码不想重构，可以单独引入create-react-class包来替代内置的React.createClass：

适配你的HTML页面（CDN方式） #

在现有script标签后面加一行：

<script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.min.js"></script>

然后把代码里的React.createClass改成createReactClass：

const MyComponent = createReactClass({
  getInitialState() {
    return { count: 0 };
  },
  render() {
    return <div>Count: {this.state.count}</div>;
  }
});

npm项目方式 #

先安装包：

npm install create-react-class

然后导入使用：

import createReactClass from 'create-react-class';

const MyComponent = createReactClass({
  // ... 保留旧代码逻辑
});

额外推荐：试试函数组件+Hook（现在最流行的写法） #

如果是新写的代码，更推荐用函数组件搭配React Hook，写法更简洁灵活：

function MyComponent() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      Count: {count}
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

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