React组件导入异常：无法获取预期布尔值，控制台输出组件函数

你遇到的问题核心是导入方式错误：

• 你在Component.js里同时做了默认导出（Component函数）和命名导出（test变量）
• 当前import test from './Component'是默认导入逻辑，会直接获取文件里的默认导出项（也就是Component函数），所以控制台输出的是函数定义而非布尔值true

两种解决方法： #

方法一：使用命名导入（推荐） #

直接在App.js里用花括号包裹变量名，精准导入命名导出的test：

import React, { useState } from "react";
import "./App.css";
import { test } from './Component' // 修改为命名导入

export default function App() {
  console.log(test) // 现在会输出true
  return (
    <>
    </>
  )
}

Component.js无需修改，它的命名导出和默认导出可以共存。

方法二：调整Component.js的导出（不推荐，不符合组件文件常规写法） #

如果一定要用默认导入获取test，需要修改Component.js的导出逻辑，同时把Component函数改为命名导出：

import React, { useState } from "react";

export default true; // 默认导出test的值
export function Component() { // 命名导出组件函数

}

之后App.js保持原导入写法即可，但这种方式会让组件文件的默认导出不是组件，不符合React开发的常规习惯，因此更推荐方法一。

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