React引入Frontpage生成的HTML页面出现标签、样式及提交事件报错

1. 运行时报错Cannot read properties of undefined (reading 'handleSubmit')原因 #

• 你使用的是React函数组件，函数组件中不存在this指向，你定义的handleSubmit是组件外的独立函数，直接引用即可不需要加this前缀
• 修复方式：将<form onSubmit={this.handleSubmit}>改为<form onSubmit={handleSubmit}>

2. 标签闭合报错原因 #

你混淆了自闭合标签和容器标签的JSX语法规则，同时Frontpage生成的老旧HTML语法不符合React JSX规范：

• 只有img、input、br这类本身无嵌套内容的原生标签可以用自闭合写法（比如<img />）
• 你所有的<table />、<tr />、<td />、<div />、<p />写法都是错误的，这类属于容器标签，必须使用<标签名> 嵌套内容 </标签名>的格式，你现在直接自闭合相当于把标签提前关闭，内部嵌套的子元素全部变成了非法的同级节点，自然会抛出结构错误
• Frontpage生成的HTML本身可能存在嵌套不严谨的问题，迁移前要先理清楚元素的层级关系，再修正闭合方式
• 修复方式：把所有容器类标签的自闭合写法改为正常的开闭标签包裹内容的格式，比如把<table border="0" width="61%"/>改成<table border="0" width="61%">，尾部对应位置加</table>，所有tr、td、p、div同理修改

3. 行内样式及属性报错原因 #

JSX的属性规则和原生HTML有差异：

• 原生HTML的行内样式是style="属性: 值"格式，JSX要求行内样式必须传入JS对象，写法为style={{属性名: '属性值'}}，且属性名要改为小驼峰格式，比如backgroundColor代替bgcolor，borderColor代替bordercolor
• 你代码中用到的bordercolorlight、bordercolordark、align、font都属于已经被HTML5废弃的老旧属性/标签，React不会识别这类非标准属性，需要替换为标准CSS样式实现
• 修复方式：移除所有废弃的HTML属性，把需要的样式通过CSS类或者符合JSX规范的style属性实现，删除<font>标签改用<span>配合样式实现字体效果

核心修改示例 #

import './InstaClone.css';
import React from 'react';

const handleSubmit = (event) =>{
    event.preventDefault();
    alert('Hi from React JS');
}

const MainLogin = () =>{
    return (
    <form onSubmit={handleSubmit}>
      <div align="center">
        {/* 容器标签改为正常开闭结构 */}
        <table border="0" width="61%">
          <tr>
            <td width="370">
              <img border="0" src="images/43cc71bb1b43_2-removebg-preview.png" width="370" height="584"/>
            </td>
            <td style={{borderColor: '#fff', borderLeftColor: '#C0C0C0'}}>
              &nbsp;
            </td>
            <td style={{borderColor: '#fff', borderLeftColor: '#C0C0C0'}} width="415">
              <table border="0" width="100%" height="301" style={{borderColor: '#C0C0C0', backgroundColor: '#fff'}} cellPadding="0" className="loginContainer">
                <tr>
                  <td style={{borderColor: '#fff', borderLeftColor: '#C0C0C0', border: '1px solid'}} height="74">
                    <p align="center">
                      <img border="0" src="images/images-removebg-preview.png" width="168" height="70"/>
                    </p>
                  </td>
                </tr>
                {/* 剩余结构同理修改所有容器标签的闭合方式，替换废弃属性即可 */}
              </table>
            </td>
          </tr>
        </table>
      </div>
    </form>
    );
}

export default MainLogin;

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