开发React待办清单时无法将自定义Form组件导入App.js主文件

DevOps 小满

2026-9-26

问题原因

你遇到的问题根源有两个：

VS Code提示删除import Form from './components/Form'，是因为你引入了Form组件，但没有在App组件的JSX中实际调用渲染它，属于未使用的冗余导入，所以编辑器会给出清理提示。
修改导入方式后问题没有解决，是因为你既没有用到已经导入的组件，同时Form组件本身还有React语法不兼容问题。

修复步骤

1. 修复Form组件的语法问题

React不支持原生HTML的class属性定义类名，需要统一替换为className，调整后的Form.js代码如下：

function Form() {
  return (
    <form>
      <input type="text" className="todo-input" />
      <button className="todo-button" type="submit">
        <i className="fas fa-plus-square"></i>
      </button>
      <div className="select">
        <select name="todos" className="filter-todo">
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="uncompleted">Uncompleted</option>
        </select>
      </div>
    </form>
  );
}

export default Form;

2. 在App组件中调用Form组件

在App.js的JSX结构里添加<Form />标签，调用你已经导入的组件，导入语句就不会再报冗余提示，调整后的App.js代码如下：

import './App.css';
import Form from './components/Form';

function App() {
  return (
    <div className="App">
      <header>
        <h1> Adi's ToDo list </h1>
      </header>
      {/* 新增Form组件调用 */}
      <Form />
    </div>
  );
}

export default App;