解决React报错Unexpected default export of anonymous function

在使用 React 进行开发时，经常会遇到 Unexpected default export of anonymous function 的报错，这是因为 ES6 规范中引入了模块系统，在使用模块 system 时必须遵循一些规则。

错误原因

在 ES6 中默认导出的是一个匿名函数，但是在 React 中默认导出的应该是一个组件类。

解决方法

方法一：使用命名导出

将匿名函数转换为具名函数并使用命名导出，如下所示：

export default function MyComponent(props) { 
  // your implementation 
};

应改为：

export function MyComponent(props) { 
  // your implementation 
};

方法二：直接命名默认导出

将匿名函数转换为具名函数并直接命名默认导出，如下所示：

const MyComponent = function MyComponent(props) {
  // your implementation 
};
export default MyComponent;

方法三：使用 import 导入的时候，指定对应的名称

如果不改变组件的代码，可以在 import 的时候指定组件名称，如下所示：

import { default as MyComponent } from './path/to/MyComponent';

示例一：使用命名导出解决默认导出匿名函数错误

以下代码中，使用命名导出的方式解决了默认导出匿名函数的错误：

import React, { Component } from 'react';

export class MyComponent extends Component {
  // your implementation
}

export default MyComponent;

示例二：使用直接命名默认导出解决默认导出匿名函数错误

以下代码中，使用直接命名默认导出的方式解决了默认导出匿名函数的错误：

import React, { Component } from 'react';

const MyComponent = class MyComponent extends Component {
  // your implementation
}

export default MyComponent;

总结

当遇到 React 报错 Unexpected default export of anonymous function 时，可以采取上述三个方法进行处理，以免影响项目开发。