我应该如何解决“尝试导入错误：‘组件’未从‘./组件’导出。”

Question

我试图导入 ResponseForm 但错误

编译失败。./src/components/projects/ProjectDetails.js 尝试导入错误：“ResponseForm”未从“./ResponseForm”导出。

发生。

ResponseForm 组件确实存在。路径似乎是正确的。我该如何解决？为什么会出现导入错误？

import  {Component}  from 'react'
import  {connect} from 'react-redux'
import  {createProject} from '../../store/actions/projectActions'
import { Redirect } from 'react-router-dom'

const ResponseForm = () => {
    state = {
        content: ''
    }

    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault()
        this.props.createProject(this.state)
    }

    return (
        <div className="container">
        <form onSubmit={handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">KAITO</h5>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">TEST</button>
            </div>
        </form>
    </div>
    )
}

export default ResponseForm;

import { connect } from "react-redux";
import { firestoreConnect,useFirestoreConnect } from "react-redux-firebase";
import { compose } from "redux";
import { ResponseForm } from "./ResponseForm";

const ProjectDetails = (props) => {
  const { project } = props;

  if (project) {
    return (
      <div className="container section project-details">
        <div className="card z-depth-0">
          <div className="card-content">
            <span className="card-title">{project.title}</span>
            <p>{project.content}</p>
          </div>
          <ResponseForm />
          <div className="project-list section"></div>
        </div>
      </div>
    );
  } else {
    return (
      <div className="container center">
        <p>Loaging project...</p>
      </div>
    );
  }
};

Answer 1

因为您使用的是export default，所以您的导入语句应如下所示：

import ResponseForm from "./ResponseForm";

（没有花括号）

或者，您可以将第一个文件更改为：

export const ResponseForm = () => {

并删除最后的export default线。然后，您可以保留当前的导入语法。