我有一个使用以下代码渲染到DOM中的react组件:
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加载到项目中,我对此问题感到非常难过。如果有人经历过类似的事情,那么知道你是如何设法解决它的话会很棒。
答案 0 :(得分:1)
我们终于找到了这个问题的答案。问题是IE9不喜欢在反应组件的构造函数中使用props,但允许在其他组件方法中使用props。
要解决此问题,请不要在构造函数中使用任何道具或尝试在webpack文件中使用plugins: [['transform-es2015-classes', {loose: true}]]
。
此处有更多详情:Console.WriteLine
& https://phabricator.babeljs.io/T3041