如何在Vite中导入JavaScript文件？React环境导入notifications.js失败求助

问题根源 #

1. 组件命名规范错误：React要求自定义组件必须以大写字母开头，你用的<notifications>是小写，React会将其识别为原生HTML标签，而非你定义的组件/数据。
2. 导入与使用不匹配：如果notifications.js里是数组数据，直接导入文件后用标签调用是无效的，需要正确导入数据并渲染；如果是组件，需要正确导出并按组件规则使用。

分场景解决 #

场景1：notifications.js存储的是数组数据 #

假设notifications.js内容如下：

// notifications.js
export const notificationList = [
  { id: 1, content: '新消息提醒' },
  { id: 2, content: '系统更新通知' }
];

在App.jsx中正确导入并渲染：

// App.jsx
import { notificationList } from './notifications';

function App() {
  return (
    <div className="App">
      <h3>通知列表</h3>
      <ul>
        {notificationList.map(item => (
          <li key={item.id}>{item.content}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

场景2：将notifications封装为React组件 #

如果要把通知做成可复用组件，修改notifications.js为组件（注意首字母大写，建议文件名同步大写）：

// Notifications.jsx
import React from 'react';

function Notifications() {
  const notificationList = [
    { id: 1, content: '新消息提醒' },
    { id: 2, content: '系统更新通知' }
  ];

  return (
    <div className="notifications">
      <h3>通知列表</h3>
      <ul>
        {notificationList.map(item => (
          <li key={item.id}>{item.content}</li>
        ))}
      </ul>
    </div>
  );
}

export default Notifications;

然后在App.jsx中导入并使用：

// App.jsx
import Notifications from './Notifications'; // 组件名保持大写

function App() {
  return (
    <div className="App">
      <Notifications /> {/* 大写开头的组件标签 */}
    </div>
  );
}

export default App;

关键注意点 #

• 自定义组件文件名和组件名必须大写开头，这是React的核心规范。
• 导入数据时要明确导出的变量名（用export const xxx），或者使用默认导出（export default xxx）。
• 渲染数组时必须给每个子元素添加唯一的key属性，避免React警告。

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