React项目中JavaScript导入语句失效问题求助

嘿，我来帮你排查下问题——你遇到的导入失效其实是两个容易忽略的细节导致的，咱们一个个说：

1. 导入方式与导出方式不匹配，且路径有误 #

你的hello.js用的是默认导出（export default），但在app.js里却用了命名导入（import { hello }），这就会导致找不到对应的导出项。另外，路径开头的/是绝对路径，在项目里通常用相对路径更稳妥。

修改app.js里的导入语句：

// 把原来的命名导入改成默认导入，同时修正路径为相对路径
import Hello from './components/hello.js';

2. React组件名必须大写 #

React规定：自定义组件的首字母必须大写，不然JSX会把它当成原生HTML标签解析，自然渲染不出来。

你需要两处修改：

• 在hello.js里把组件名改成大写：

import React from 'react';
// 组件名改为Hello
export default function Hello(){
  return <h1>Hello user</h1>;
}

• 在app.js里使用组件时也要用大写：

function App() {
  return (
    <div className="App">
      <header>
        <p>
          {/* 这里改成<Hello /> */}
          <Hello />
        </p>
      </header>
    </div>
  );
}

把这两处改完后，你的组件应该就能正常渲染啦！

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