React组件已声明export default却提示无默认导出的问题求助

报错根因 #

你写的export default Main本身没有问题，报错是因为JSX存在多处语法错误，导致整个文件编译失败，导出语句未被正常识别。需要修复以下几处语法问题：

需修复的错误点 #

• 1. 所有class属性替换为className
  React中class是JS保留关键字，JSX里指定元素样式类必须用className属性，比如<div className="wrapper">、<p className="logo">，全量替换所有的class=即可。

• 2. 修复闭合错误的标签
  你在like-counts块漏写了闭合标签：

// 错误写法
<div class="like-counts">
  <span>like 4,000</span>
<div>

// 正确写法
<div className="like-counts">
  <span>like 4,000</span>
</div>

同时检查全量的div闭合标签，你当前的JSX结构有多处未正确闭合的嵌套div，修复后保证所有开始标签都有对应的结束标签。

• 3. 删除input标签多余的逗号
  搜索框的input标签中，placeholder属性后多了无效的逗号：

// 错误写法
<input class="search-box" type="text" placeholder="&#xF002; Search", style="font-family:Arial, FontAwesome" />

// 正确写法
<input className="search-box" type="text" placeholder="&#xF002; Search" style={{fontFamily: "Arial, FontAwesome"}} />

另外JSX中style属性要传对象，所以上面的style写法也同步调整为对象格式。

• 4. 所有img标签补充alt属性
  React要求img标签必须有alt属性做无障碍适配，否则也会抛出编译警告，比如<img alt="compass" id="compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png" />

修复验证 #

上面的语法错误全部修复后，文件可以正常编译，export default Main就会被正确识别，引入报错自然消失。

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