React集成EmailJS实现联系表单动态修改className报错如何解决

你触发报错的核心原因是statusMessage是字符串类型的状态变量，并非DOM元素实例，无法直接为其添加className属性，React遵循数据驱动视图的逻辑，禁止直接操作DOM属性，所有视图变更都需要通过状态控制。
你之前的拼接写法不生效是因为两个类名之间没有空格，最终拼接结果为status-messagesuccess，和预期的类名不匹配。

步骤1：新增状态控制提示类型 #

在组件内新增一个状态用于标识当前提交结果的类型：

import { useState } from 'react';

// 组件内部定义状态
const [statusMessage, setStatusMessage] = useState('');
// 可选值：idle(默认无状态)/success(提交成功)/failure(提交失败)
const [statusType, setStatusType] = useState('idle');

步骤2：修改提交事件逻辑 #

删除直接操作statusMessage.className的代码，改为修改statusType状态：

const onSubmit = (data) => {
    generateContactNumber();
    sendForm('default_service', 'template_anr3xk1', '#contact-form')
      .then(function(response) {
      setStatusMessage("消息发送成功！");
      setStatusType("success");
      setTimeout(()=> {
        setStatusType('idle');
        setStatusMessage(''); // 可选：5秒后清空提示文字
      }, 5000)
    }, function(error) {
      setStatusMessage("消息发送失败，请稍后重试。");
      setStatusType("failure");
      setTimeout(()=> {
        setStatusType('idle');
        setStatusMessage('');
      }, 5000)
    });
  };

步骤3：改造p标签的动态类名逻辑 #

使用模板字符串拼接类名，注意保留类名之间的空格：

<h2>联系我们</h2>
<p 
  className={`status-message ${statusType === 'success' ? 'success' : statusType === 'failure' ? 'failure' : ''}`} 
>
  {statusMessage}
</p>
<form onSubmit={handleSubmit(onSubmit)} id='contact-form'>
...
</form>

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