React.js如何导出组件？导入Item时报无默认导出错误如何解决？

报错原因 #

你当前使用import Item from './Item'的默认导入语法引入组件，但Item.js文件中没有对应声明默认导出，只存在命名导出的组件，因此触发导入匹配错误。
React支持两种导出/导入模式：

• 默认导出：单文件仅允许存在1个，导入时无需加花括号，可自定义引入名称
• 命名导出：单文件可存在多个，导入时必须和导出名称完全一致，需用花括号包裹导入名

解决方法 #

有两种可直接落地的修复方案，任选其一即可：

方案1：调整Item组件为默认导出（适配现有导入语法） #

打开Item.js文件，在组件定义完成后添加默认导出声明：

// 函数组件示例
const Item = () => {
  return <div>你的组件内容</div>
}
// 新增这行默认导出代码
export default Item

// 类组件示例同理
class Item extends React.Component {
  render() {
    return <div>你的组件内容</div>
  }
}
export default Item

方案2：调整导入语法为命名导入（适配现有Item导出逻辑） #

如果你的Item.js已经使用了命名导出的写法，比如export const Item = () => {}，只需要修改导入语句，加上花括号匹配命名导出即可：

// 替换原有导入语句
import { Item } from './Item'

补充说明 #

你贴出的组件使用代码本身没有语法问题，导出导入规则匹配后即可正常运行。

内容的提问来源于stack exchange，提问作者Ahmet