从同一目录导入Reactjs

ped*_*net 5 frontend ecmascript-6 reactjs

我正在用Reactjs构建TODO应用程序,在我的components文件夹中,我有一个名为TaskList的类,其中包含以下代码以迭代任务:

import React, { Component } from 'react';
import {connect} from 'react-redux';

class TaskList extends Component {
    render(){
        return(
            <table>
                <thead>
                    <tr>
                        <th>Tasks</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.tasks.map((task,index) => <Task key={index} task={task} />)}
                </tbody>
            </table>
        );
    }
}

function MapStateToProps(state){
    return{
        tasks:state.tasks
    }
}

export default connect (MapStateToProps)(TaskList);
Run Code Online (Sandbox Code Playgroud)

同样在components文件夹中,我的TaskList类使用了一个名为Task的类:

任务:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {DeleteTask} from '../../redux/actions';

class Task extends Component {
    render(){
        return(
            <tr>
                <td>
                    {this.props.task}
                </td>
                <td>
                    <button onClick = {() => this.props.DeleteTask(this.props.id)}>Delete</button>
                </td>
            </tr>

        );
    }
}

function MapDispatchToProps(dispatch){
    return bindActionCreators({DeleteTask},dispatch);
}

export default connect (() => {return {};},MapDispatchToProps)(Task);
Run Code Online (Sandbox Code Playgroud)

我的问题是我没有定义错误Task,因为我没有将Task导入Tasklist。在TaskList上,我已经尝试过:

import Task from './components/task';
import Task from 'task'; //as it's on the same directory
import Task from './task';
Run Code Online (Sandbox Code Playgroud)

没有任何工作。有什么想法吗?

ped*_*net 8

我自己解决了错误,导入应该是

 Import Task from '../task' 
Run Code Online (Sandbox Code Playgroud)


BRe*_*ddy 8

我知道OP解决了OP,但它对我不起作用。这是我必须做的:

import Task from '../components/task'

经过一番调查,我发现项目树从项目根开始,因此必须从当前文件位置跟踪相对路径名,然后向上(../)向下遍历树(subdirName/)到导入的文件,如果您想要指定相对路径。也可以指定绝对路径,例如:

import Task from 'C:/Users/devusr1/source/repos/React/hello-world/src/components/task.js'

相对路径和绝对路径都适合我(我使用的是nodejs。)

什么没有奏效:

.

./

../components

./src/components/task