使用ReactJS与CDN导入自定义组件时遭遇404错误

1. 先解决核心404问题：修正文件路径 #

控制台的404错误是因为导入路径和实际文件结构不匹配。假设你的项目结构如下：

项目根目录
├─ index.html
├─ core/
│  └─ main.js
└─ components/
   └─ input.js

那么main.js中导入组件的路径应该是../components/input.js（从core目录回到上一级，再进入components），而不是./components/input.js（后者会去core/components目录找文件，自然找不到）。

2. 正确编写自定义组件 #

因为浏览器原生不支持JSX，且@babel/standalone不会自动处理导入的模块文件，所以组件可以用React.createElement写法（无需额外编译），同时要确保默认导出：

// components/input.js
import React from 'https://cdn.skypack.dev/react@18';

export default function InputWithLabel(props) {
  const { label, id, type, value, onChange } = props;
  return React.createElement(
    'div',
    null,
    React.createElement('label', { htmlFor: id }, label),
    React.createElement('input', { id, type, value, onChange })
  );
}

3. 修复main.js中的问题 #

• 补充未定义的inputValue和handleChange状态与方法
• 改用React 18标准的createRoot渲染方式
• 统一用React.createElement避免JSX编译问题

// core/main.js
import React, { useState } from 'https://cdn.skypack.dev/react@18';
import ReactDOM from 'https://cdn.skypack.dev/react-dom@18/client';
import InputWithLabel from '../components/input.js';

const App = () => {
  const [inputValue, setInputValue] = useState('');
  const handleChange = (e) => setInputValue(e.target.value);

  return React.createElement(
    'div',
    null,
    React.createElement(InputWithLabel, {
      label: 'Name:',
      id: 'nameInput',
      type: 'text',
      value: inputValue,
      onChange: handleChange
    })
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));

4. 验证本地服务器配置 #

用Live Server（如VS Code插件）启动项目后，直接在浏览器地址栏访问http://127.0.0.1:5500/components/input.js，如果能看到文件内容，说明路径和服务器配置没问题；如果不行，调整文件结构或导入路径。

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