我的React应用程序出错 - '必须返回有效的React元素(或null)'

时间:2017-06-06 22:40:26

标签: javascript reactjs ecmascript-6

我有2个React组件,如下所示。当我尝试在Internet Explorer 9中加载它时,我收到以下错误: IE Error

// App.jsx
import React from 'react';
import Main from './Main';

const App = () => (
  <div>
    <Main />
  </div>
);

export default App;

// Main.jsx
import React from 'react';

const Main = () => (
  <div>
    Testing Main Component
  </div>
);

export default Main;

我感到很困惑,因为App和Main都是相同的语法,但我可以将App的内容更改为以下内容,它会呈现给屏幕而没有任何问题:

import Main from './Main';

const App = () => (
  <div>
    This is a test render
  </div>
);

export default App;

我有点陷入困境,并且在SO上阅读了大部分其他帖子,并且似乎没有任何帮助。对不起,如果这个问题不应该在这里被问到,但真的卡住了,任何帮助将不胜感激。

由于

// Babel.js config

module.exports = {
  test: /\.(js|jsx)?(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    plugins: ['transform-class-properties', 'add-module-exports', 'transform-react-inline-elements'],
    presets: [
      'react',
      'stage-2',
      'es2015',
      ['env', { modules: false }],
    ],
  },
};

0 个答案:

没有答案