Question

我正在这里编写一个示例应用程序来了解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;

Answer 1

您在ContactListItem#render()中收到错误，因为Link未定义。从React Router v4开始，<Link />不再是react-router的一部分，而是react-router-dom包的一部分。更改此问题可以解决您的问题：

import { Link } from 'react-router-dom';

Answer 2

根据documentation，使用

import { Link } from 'react-router-dom';`

与以前工作的react-router不同。

但react-router-dom附带：

HashRouter
BrowserRouter
MemoryRouter
提示
NavLink
StaticRouter等

使用

时，你可能会受到大量摇晃的好处

import Link from 'react-router-dom/Link';

如果您的应用中不需要上述所有内容。

我的渲染方法有什么问题？

2 个答案: