Question

当我尝试将组件导入到我的 React JS文件中时，我收到此错误：

./src/containers/ContactPage/ContactPage.js
Attempted import error: 'ContactForm' is not exported from '../../containers'.

这是我导入ContactForm的方式：

import React from 'react';
import config from '../../config';
import { twitterPageURL } from '../../util/urlHelpers';
import { StaticPage, TopbarContainer, ContactForm } from '../../containers';
import {
  LayoutSingleColumn,
  LayoutWrapperTopbar,
  LayoutWrapperMain,
  LayoutWrapperFooter,
  Footer,
  ExternalLink,
} from '../../components';

这是我的ContactForm文件：

import React from "react";
import axios from "axios"; // For making client request.

class ContactForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: "", surname: "", email: "", message: ""};
  }

  handleForm = e => {
    axios.post(
      "https://formcarry.com/s/Ek8wZYC7v0H", 
      this.state, 
      {headers: {"Accept": "application/json"}}
      )

      .then(function (response) {
        let successMessage = document.querySelector('.success-message');
        successMessage.innerHTML = JSON.stringify(response.data.title);
      })
      .catch(function (error) {
        let successMessage = document.querySelector('.success-message');
        successMessage.innerHTML = JSON.stringify(error);
      });

    e.preventDefault();
    this.setState({fullName: '', email: '', message: ''}) // <= here
  }
    handleFields = e => this.setState({ [e.target.name]: e.target.value });  

  render() {
    return (

      <form onSubmit={this.handleForm}>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} value={this.state.fullName} />

        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} value={this.state.fullName} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} value={this.state.fullName} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields} value={this.state.fullName}></textarea>

        <button type="submit">Send</button>

 <div className="success-message">
                <label></label>
              </div>

      </form>
    );
  }
}

export default ContactForm;

因此，我的ContactForm文件位于container / ContactForm / ContactForm.js容器中，它基本上是一个联系人表单，我想将其导入到我的联系人页面中。我尝试按照此处的答案解决此问题，但无法解决。

我尝试将其导入为（无效）：

import ContactForm from '../../containers';

Answer 1

我认为您的./src/containers/index.js文件未导出ContactForm模块。该文件应包含该行（例如对于StaticPage，TopbarContainer ...）

export ContactForm from './ContactForm'

如何解决我的React App中的尝试导入错误？

1 个答案: