javascript - 我应该如何解决 "Attempted import error: ' 组件'未从 './Component' 导出。”

Question

我尝试导入 ResponseForm但错误

Failed to compile. ./src/components/projects/ProjectDetails.jsAttempted import error: 'ResponseForm' is not exported from './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 行。然后，您可以保留当前的导入语法。