如何将.htm表单转换为ReactJS组件并配置localhost:3000/assist访问路径

1. 安装Bootstrap依赖 #

你原有HTML中引入的是本地Bootstrap资源，直接在React项目中安装官方包即可，无需手动管理静态文件：

npm install bootstrap

在项目入口文件（通常是src/index.js）顶部引入样式：

import 'bootstrap/dist/css/bootstrap.min.css';
// 需要用到Bootstrap交互效果的话额外引入这行
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

2. 编写Assistencia组件 #

新建src/components/Assistencia/index.jsx文件，把原HTML内容转换为符合JSX语法的代码，注意几个适配改动：

• HTML的class属性替换为className
• 所有单标签必须闭合
• 修正原HTML的错误：设备输入框的name、id错误写为email，告警类名altert修正为alert
• 不需要保留html、head、body标签，React框架会统一处理页面结构
  完整组件代码如下：

import React from 'react';

const Assistencia = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col-6">
          <div className="card">
            <div className="card-body">
              <h1> Pedido de Assistência </h1>
              <form id="form-contato">
                <div className="form-group">
                  <label htmlFor="nome" >Nome: </label>
                  <input className="form-control" type="text" name="nome" id="nome" placeholder="Introduza o seu nome " />
                </div>
                <div className="form-group">
                  <label htmlFor="email">Email: </label>
                  <input className="form-control" type="email" name="email" id="email" placeholder="Introduza o seu email " />
                </div>
                <div className="form-group">
                  <label htmlFor="aparelho">Equipamento: </label>
                  <input className="form-control" type="text" name="aparelho" id="aparelho" placeholder="Introduza o nome do equipamento " />
                </div>
                <div className="form-group">
                  <label htmlFor="mensagem">Mensagem: </label>
                  <textarea className="form-control" name="mensagem" id="mensagem" placeholder="Digite o problema do equipamento"></textarea>
                </div>
                <div className="form-group text-center" >
                  <button type="submit" className="btn btn-primary">Enviar </button>
                </div>
                <div className="alert alert-danger d-none">
                  Preencha o campo <span id="campo-erro"></span> !
                </div>
              </form>
            </div>
          </div>
        </div>
        <div className="col-6">
          <div className="card">
            <div className="card-body">
              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3002.24562723669!2d-8.510244526470451!3d41.19461821588249!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd2462171b81bd9f%3A0x7be7763fa41be50!2sMegapositivo%20Lda!5e0!3m2!1spt-PT!2spt!4v1636746275861!5m2!1spt-PT!2spt" frameBorder="0" style={{border:0}} allowFullScreen="" loading="lazy"></iframe>
            </div>
          </div>
        </div>
      </div> 
    </div>
  )
}

export default Assistencia

你已编写的AssistPage代码无需改动可以直接使用。

3. 配置路由规则 #

找到项目的路由配置文件（通常是src/App.js或者src/router/index.js，按你项目实际结构调整），新增/assist路径的映射规则即可。
如果使用的是react-router-dom v6版本，写法如下：

import { Routes, Route } from 'react-router-dom';
import AssistPage from './pages/AssistPage'; // 路径按你实际文件位置修改

// 放在Routes标签内部
<Route path="/assist" element={<AssistPage />} />

如果使用的是react-router-dom v5版本，写法如下：

import { Route } from 'react-router-dom';
<Route path="/assist" component={AssistPage} />

4. 迁移表单逻辑 #

你原HTML中引入的formulario.js是表单校验、提交逻辑，直接把对应代码迁移到Assistencia组件中，用React状态管理表单值和校验逻辑即可，无需再引入外部JS文件。
配置完成后启动项目，访问localhost:3000/assist即可打开目标表单页面。

内容的提问来源于stack exchange，提问作者Henrique Araújo