react高级组件无法找不到模块

Question

import React, {Component} from 'react'

export default (WrappedComponent) => {
    class NewComponent extends Component {
        constructor() {
            super();
            this.state = {
                username: ''
            }
        }

        componentWillMount() {
            let username = localStorage.getItem('username');
            this.setState({
                username: username
            })
        }

        render() {
            return <WrappedComponent username={this.state.username}/>
        }
    }

    return NewComponent
}

import React, {Component} from 'react'

/*
class Welcome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ''
        }
        localStorage.username="欢迎";
    }

    componentWillMount() {
        let username = localStorage.getItem('username');
        this.setState({
            username: username
        })
    }

    render() {
        return (
            <div>welcome {this.state.username}</div>
        )
    }
}

export default Welcome;
*/

import wrapWithUsername from 'wrapWithUsername';

class Welcome extends Component {

    render() {
        return (
            <div>welcome {this.props.username}</div>
        )
    }
}

Welcome = wrapWithUsername(Welcome);

export default Welcome;

import React, {Component} from 'react'

/*
class Goodbye extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ''
        }
        localStorage.username="再见";
    }

    componentWillMount() {
        let username = localStorage.getItem('username');
        this.setState({
            username: username
        })
    }

    render() {
        return (
            <div>goodbye {this.state.username}</div>
        )
    }
}

export default Goodbye;

*/

import wrapWithUsername from 'wrapWithUsername';

class Goodbye extends Component {

    render() {
        return (
            <div>goodbye {this.props.username}</div>
        )
    }
}

Goodbye = wrapWithUsername(Goodbye);

export default Goodbye;

Answer 1

自己写的组件一定要写成相对路径。如果在同一级目录下，就这样写
import wrapWithUsername from './wrapWithUsername';

你原来的写法默认是引入node_modules中的依赖

Answer 2

自定义组件如果是在当前路径下，引入的时候要加'./'，如：'./wrapWithUsername'