我正在这里编写一个示例应用程序来了解React,但我的一个更简单的组件是抛出一个我似乎无法跟踪的错误。
错误:元素类型无效:期望一个字符串(用于内置 组件)或类/函数(用于复合组件)但得到: 未定义。您可能忘记从文件中导出组件 它的定义。检查
ContactListItem
的渲染方法。
这是ContactListItem组件的代码。
import React, { Component } from 'react';
import { ListGroupItem } from 'react-bootstrap';
import { Link } from 'react-router';
class ContactListItem extends Component {
render() {
const { contact } = this.props;
return (
<ListGroupItem>
<Link to={'/contact/${contact.id'}>
<h4>{contact.name}</h4>
</Link>
</ListGroupItem>
);
}
}
export default ContactListItem;
这是一个非常简单的课程。没有什么事情对我来说是有问题的。为了完成起见,这里是父组件。
import React, { Component } from 'react';
import { ListGroup } from 'react-bootstrap';
import ContactActions from '../actions/ContactActions';
import ContactStore from '../stores/ContactStore';
import ContactListItem from './ContactListItem';
function getContactListItem(contact) {
return (
<ContactListItem key={contact.id} contact={contact} />
);
}
class ContactsComponent extends Component {
constructor() {
super();
this.state = {
contacts: []
}
this.onChange = this.onChange.bind(this);
}
componentWillMount() {
ContactStore.addChangeListener(this.onChange);
}
componentDidMount() {
ContactActions.receiveContacts()
}
componentWillUnmount() {
ContactStore.removeChangeListener(this.onChange);
}
onChange() {
this.setState({
contacts: ContactStore.getContacts()
});
}
render() {
let contactListItems;
if ( this.state.contacts ) {
contactListItems = this.state.contacts.map(contact => getContactListItem(contact));
}
return (
<div>
<ListGroup>
{contactListItems}
</ListGroup>
</div>
);
}
}
export default ContactsComponent;
答案 0 :(得分:3)
您在ContactListItem#render()
中收到错误,因为Link
未定义。从React Router v4开始,<Link />
不再是react-router
的一部分,而是react-router-dom
包的一部分。更改此问题可以解决您的问题:
import { Link } from 'react-router-dom';
答案 1 :(得分:1)
根据documentation, 使用
import { Link } from 'react-router-dom';`
与以前工作的react-router
不同。
但react-router-dom
附带:
HashRouter
BrowserRouter
MemoryRouter
提示
NavLink
StaticRouter等
使用
时,你可能会受到大量摇晃的好处import Link from 'react-router-dom/Link';
如果您的应用中不需要上述所有内容。