我正在使用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);
同样在components文件夹中,我有一个名为Task的类,在我的TaskList类中使用:
任务:
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);
我的问题是我遇到错误任务未定义,因为我没有将任务导入任务列表。在TaskList上我已经尝试过了:
import Task from './components/task';
import Task from 'task'; //as it's on the same directory
import Task from './task';
没有任何工作。关于这个的任何想法?
答案 0 :(得分:3)
我解决了错误我自己,导入应该是
Import Task from '../task'
答案 1 :(得分:1)
我知道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