ReactJS同目录组件导入问题：TODO应用TaskList任务迭代代码求助

嗨，这个问题很容易解决～因为你的Task组件和TaskList组件在同一个components目录下，直接用相对路径导入就可以了，具体分两种常见情况：

情况1：Task组件是默认导出 #

这是React组件最常用的导出方式（比如export default Task），你只需要在TaskList组件的导入区域新增一行：

import Task from './Task';

把它加到现有导入代码后面，完整的导入部分就像这样：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Task from './Task'; // 新增的同目录组件导入

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>
    )
  }
}

情况2：Task组件是命名导出 #

如果Task组件用的是命名导出（比如export const Task = () => {...}），那导入时要加上花括号：

import { Task } from './Task';

额外提一句：如果你的Task组件文件名是Task.jsx或Task.tsx，可以省略后缀名（React项目的构建工具一般都支持自动识别），当然写完整后缀也完全没问题。

内容的提问来源于stack exchange，提问作者pedrodotnet