reactjs - 如何在 IE9 中运行 ES6 React 应用程序而不会出现错误

Question

我正在使用 React 0.14 和 Babel 5.8.23 开发 JS 应用程序。

我的应用程序在 Chrome 中运行良好，没有任何警告，但当我在 IE9 中查看该应用程序时，该应用程序会爆炸，显示:

SCRIPT5022:抛出异常但未捕获

上线

ReactDOM.render(

当我捕获异常时，它表明它是从这段代码中抛出的:

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('无法将类作为函数调用'); } }

当我从生成的 index.js 中手动删除这些抛出时，应用程序会正常运行，尽管我确实看到了这些警告(可能不相关，并在 https://github.com/facebook/react/issues/4990 中进行了讨论):

警告:MainLogo(...):React 组件类必须扩展 React.Component

我的所有组件都扩展了 React.Component:

import React, { Component } from 'react';

export default class MainLogo extends Component {
  render() {
    return (
      <h1 className="logo">
        <img src="/img/brand/logo.png" />
      </h1>
    );
  }
};

为什么这个 _classCallCheck 在 IE9 中被触发，我可以采取什么不同的措施来防止它？

Answer 1

事实证明，以下是IE9的问题:

1.

import React, { Component } from 'react';

export default class Whatever extends Component { ...

我必须导入React;，然后...扩展React.Component。

2.

我必须将我的connect组件导出为非顶级组件，即在文件中给它们一个名称:

export class App extends React.Component {
  ...
}

export const AppContainer = connect(state => ({ routerState: state.router }), { pushState }) (App);

3.

我必须禁用livereactload https://github.com/milankinen/livereactload ，特别是从 babel-plugin-react-transform 使用的 .babelrc 中删除它。

只有完成所有这些步骤，我的应用程序才能在 IE9 上令人满意地运行。