如何将箭头函数编写的React组件导入app.js？导出错误如何解决？

报错核心原因 #

• JavaScript 本身大小写敏感，你在 ./Components/todos.js 中导出的变量是小写的 todos，但在 app.js 中尝试导入的是大写开头的 Todos，二者命名不匹配导致系统识别不到对应导出项。
• 额外补充：React 组件规范要求组件名必须大写开头，否则运行时会被识别为原生 HTML 标签抛出异常，你原代码的小写组件命名本身也不符合开发规范。

解决方案 #

方案1（推荐：符合React开发规范） #

修改 todos.js 中的导出变量名为大写开头的 Todos，调整后代码如下：

import React from 'react'

export const Todos = () => {
    return (
        <div>
            todos works!!!
        </div>
    )
}

调整后你原 app.js 中的导入语句无需改动即可正常运行。

方案2（无需修改导出代码） #

在 app.js 导入时重命名导出的小写变量，修改导入语句为：

import { todos as Todos } from './Components/todos';

修改后即可正常使用 <Todos /> 组件。

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