无法在 IE9/10 中获取属性 ReactJS 的值答案

【问题标题】：Unable to get value of the property ReactJS in IE9/10无法在 IE9/10 中获取属性 ReactJS 的值
【发布时间】：2016-07-15 10:58:09
【问题描述】：

我有一个反应组件，我正在使用以下代码将其渲染到 DOM 中：

ReactDOM.render(React.createElement(PROJECT.CalendarApp, 
        {   key                     : 'globalcalendar', 
            roomPage                : false, 
            localeRegion            : PROJECT.user.locale().region,
            localeStartDay          : PROJECT.user.locale().startDay,
            showCalendarOnLoad      : false,
            name                    : 'globalcalendar',
            availabilityCalendar    : false 
        }), 
    document.getElementById('global_calendar_component'));

我在 IE 9/10 中收到以下错误，但似乎无法弄清楚原因 - Unable to get value of the property 'localeRegion' object is null or undefined reactjs。

PROJECT.user.locale().region 被正确定义并返回'en' 字符串。

这个问题只发生在 IE 9 和 10 中，我的 webpack 设置现在看起来像这样：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, '../src/Family/SystemBundle/Resources/public/js/components/compiled');
var APP_DIR = path.resolve(__dirname, '../src/Family/SystemBundle/Resources/public/js/components/');

var config = {
    entry: {
        calendar    : APP_DIR + '/calendar.jsx'
    },
        output: {
            path: BUILD_DIR,
            filename: '[name].js'
        },
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel',
                query:
                {
                    presets:[require.resolve('babel-preset-es2015'), require.resolve('babel-preset-react')] // Brackets - required for babel symlinking because node_modules is not in the root folder.
                }
            }
        ]
    }
};

module.exports = config;

我已经将 Babel Polyfill 加载到项目中，对此问题感到非常困惑。如果有人遇到过类似的事情，那么很高兴知道您是如何解决的。

【问题讨论】：

标签： javascript internet-explorer reactjs babeljs babel-polyfill

【解决方案1】：

我们终于找到了这个问题的答案。问题是 IE9 不喜欢在 react 组件的构造函数中使用 props，但允许在其他组件方法中使用 props。

要解决此问题，请不要在构造函数中使用任何道具或尝试在 webpack 文件中使用 plugins: [['transform-es2015-classes', {loose: true}]]。

【讨论】：

谢谢汤姆，在想知道为什么今天下午 IE9 失败了几个小时之后，这非常有用。它还需要 'babel-plugin-transform-es2015-classes', {loose: true}。