React应用中Attempted import error：'ContactForm'未导出的解决咨询

我来帮你解决这个导入问题，咱们先理清楚问题出在哪，再一步步修复。

问题根源 #

你的报错主要来自两个核心问题：

1. 导出/导入方式不匹配：你的ContactForm用的是export default默认导出，但你在导入时用了命名导入（{ ContactForm }），这两种导出导入方式不兼容。
2. 导入路径指向错误：你直接从../../containers根目录导入，但ContactForm实际在containers/ContactForm/ContactForm.js子目录里，而且containers根目录没有专门的index.js来统一导出子组件，所以React找不到对应的模块。

两种修复方案 #

方案一：直接导入正确路径（快速修复） #

修改你ContactPage.js里的导入语句，把ContactForm的导入改成默认导入，并且指向正确的文件路径：

import React from 'react';
import config from '../../config';
import { twitterPageURL } from '../../util/urlHelpers';
// 单独导入每个容器组件，路径指向实际文件位置
import StaticPage from '../../containers/StaticPage/StaticPage';
import TopbarContainer from '../../containers/TopbarContainer/TopbarContainer';
import ContactForm from '../../containers/ContactForm/ContactForm';
// 组件部分的导入保持不变
import { LayoutSingleColumn, LayoutWrapperTopbar, LayoutWrapperMain, LayoutWrapperFooter, Footer, ExternalLink } from '../../components';

这种方式不需要额外创建文件，直接修正路径和导入方式就能解决问题。

方案二：通过containers/index.js统一导出（推荐，适合项目规模化） #

如果你的项目里经常需要从containers目录导入多个组件，推荐在containers根目录创建一个index.js文件，专门用来统一导出所有容器组件，这样可以简化后续的导入路径。

1. 在./src/containers/下创建index.js文件，添加以下内容：

// 导出所有需要的容器组件，把其他组件（比如StaticPage、TopbarContainer）也按这个格式添加
export { default as ContactForm } from './ContactForm/ContactForm';
export { default as StaticPage } from './StaticPage/StaticPage';
export { default as TopbarContainer } from './TopbarContainer/TopbarContainer';

2. 回到ContactPage.js，你原来的导入语句就可以正常工作了：

import { StaticPage, TopbarContainer, ContactForm } from '../../containers';

原理是：当你从目录导入时，React会自动查找该目录下的index.js文件，我们在index.js里把默认导出的ContactForm转换成了命名导出，这样就能和你原来的解构导入匹配了。

额外小提示（和导入无关，但能避免后续bug） #

我注意到你ContactForm组件里的state和input的value有不匹配的问题：比如你state里定义的是name、surname，但input的value用的是this.state.fullName，这会导致输入框无法正常更新内容，建议改成对应的state字段：

// name输入框对应this.state.name
<input type="text" id="name" name="name" onChange={this.handleFields} value={this.state.name} />
// surname输入框对应this.state.surname
<input type="text" id="surname" name="surname" onChange={this.handleFields} value={this.state.surname} />
// email和message同理，对应各自的state字段

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