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

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 语句应如下所示：

import ResponseForm from "./ResponseForm";

（没有花括号）

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

export const ResponseForm = () => {

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

Answer 2

回答

响应表单是默认导出：

export default ResponseForm;

你应该像这样导入它：

import ResponseForm from "./ResponseForm";

使用非默认导出

如果您想避免将其设为默认导出，您可以执行以下操作：

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

export 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>
    )
}

并按上述方式导入：

import { ResponseForm } from "./ResponseForm";

Answer 3

这是因为您将 ResponseFrom 作为默认值导出并尝试使用 {} 导入

需要喜欢这个

import ResponseForm from "./ResponseForm";

代替

import { ResponseForm } from "./ResponseForm";

在项目详情中

Answer 4

Tenia el mismo questiona pero hay que tener en cuanta que para que funcione un importacion export default solo debe haber uno en el contecto de App los demas solo son export mas funcion, generalmente el nombre que utilizo para unsar el fragmanto es el mismo nombre de la功能。