[英]How can I fix attempted import error in my React App?
当我尝试将组件导入我的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 文件在容器/ContactForm/ContactForm.js 中,它基本上是我想导入到我的联系页面的联系表单。 我尝试按照此处的答案来解决此问题,但无法解决。
我尝试将其导入为(无效):
import ContactForm from '../../containers';
我认为您的./src/containers/index.js
文件不会导出ContactForm
模块。 此文件应包含该行(例如对于 StaticPage、TopbarContainer...)
export ContactForm from './ContactForm'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.