reactjs 未找到模块:错误:无法解析“./components/ToDoItem”

luaexgnf  于 2023-03-29  发布在  React
关注(0)|答案(1)|浏览(183)
const ToDoItem = ({ text }) => {
  return (
    <li>
      <input type="checkbox" />
      <span>{text}</span>
    </li>
  );
};
export default ToDoItem;

我无法理解文件的路径有什么问题,文件扩展名是.js,代码编辑器看到了它的路径,但React没有显示错误
我的应用程序. js

import TOdoList from "./components/ToDoList";
function App() { return (
    <div className="App">
    
      <TOdoList />
    </div>
  );
}

export default App;
6pp0gazn

6pp0gazn1#

您的App.js中的import语句中似乎存在拼写错误。您编写的是TOdoList而不是ToDoList。这可能是导致问题的原因。请更新您的import语句以匹配导出的组件名称:

import ToDoList from "./components/ToDoList";

所以你的app.js应该看起来像这样:

import ToDoList from "./components/ToDoList";

function App() {
  return (
    <div className="App">
      <ToDoList />
    </div>
  );
}

export default App;

确保import语句中的文件名和路径与实际文件名和位置匹配。
我假设你的TodoList以类似的方式导入TodoItem

import React from 'react';
import ToDoItem from './ToDoItem'; //Adjust the path of ToDoItem based on your file structure

const ToDoList = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <ul>
      {items.map((item, index) => (
        <ToDoItem key={index} text={item} />
      ))}
    </ul>
  );
};

export default ToDoList;

相关问题