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

时间:2017-08-17 13:42:46

标签: javascript reactjs

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

2 个答案:

答案 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'; 

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