为什么我的反应导入功能不起作用答案

【问题标题】：Why is my react import function not working为什么我的反应导入功能不起作用
【发布时间】：2023-01-30 09:17:18
【问题描述】：

我试图从另一个文件中导入一个函数，但它说我的函数没有定义

在 Todolist.js 中：

import React from 'react';
export default function TodoList() {
  return (
    <div>
      <h1>Todo List</h1>
    </div>
  )
}

在 App.js 中：

//import react from 'react';
import React from 'react';
import {Todolist} from "./TodoList";


function App() {
  return (
    <TodoList />
  )
}

export default App;

结果：

src\App.js 中的警告第 3:9 行：'Todolist' 已定义但从未使用过 no-unused-vars

src\App.js 中的错误第 8:6 行：'TodoList' 未定义 react/jsx-no-undef

【问题讨论】：

您默认导出组件，然后将其导入为命名导入：请查看链接：import-export。
从“./TodoList”导入{Todolist}；将其替换为 import {TodoList} from './Todolist';

标签： reactjs

【解决方案1】：

更改为默认导入

import Todolist from "./TodoList";

【讨论】：

【解决方案2】：

因为你使用export default ....

导入应该是这样的。

import Todolist from "./TodoList";

【讨论】：

【解决方案3】：

在 es6 中有两种导入/导出的方法：

默认导出（只能有一个默认导出）

命名导出（可以有零个或多个命名导出）

如果组件/模块是默认导出，则需要在不带括号的情况下导入它。

// Default Export.
export default App;

// Import above default export without curly braces.
import App from './path/to/your/App';

如果组件/模块是命名导出，则需要使用花括号导入它。

// Named Export.
export A = 'Test String';
export {YourComponent};

// Import above named export with curly braces.
import {A} from './path/to/A';
import {YourComponent} from './path/to/YourComponent';

【讨论】：

【解决方案4】：

如前所述，您需要查看命名/默认导出选项。此外，在 TodoList 的导入中有一个拼写错误 - 'l' 应该大写。

【讨论】：