React运行报class属性错误 指向react-dom.development.js排查

问题现象 #

• 运行环境：Mac端本地启动的React + Node.js项目
• 控制台报错：持续抛出警告Warning: Invalid DOM property 'class'. Did you mean 'className'?，同时伴随2个关联报错
• 定位难点：控制台标注的错误来源为依赖包内部文件react-dom.development.js 第86行，该文件不在本地业务代码目录中，无法直接定位业务侧出错位置
• 控制台报错截图：
  
• 已提供的业务组件Pingbutton.js源码如下：

import React, { useState } from "react";
import "./Pingbutton.scss";
import "./Pingbutton.css";
import { gsap } from "gsap";
// import find_my_iphonen from "./Users/omarfares/Desktop/PINGOMAR/ping-omar-Backend/app.js";
import axios from "axios";

class Pingbutton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { val: "Here is your message omar!:   " };
  }

  handleSubmit = () => {
  
    console.log("its running");
    let databody = {
      message: this.state.val,
    };
    console.log(" the message is :" + databody.message);
    console.log(" the message is :" + this.state.val);
    return fetch("http://localhost:5000/stored", {
      method: "POST",
      body: JSON.stringify(databody),
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => console.log(data));
  };

  changeval = () => {
    let newval = this.textInput.value;
    console.log("submitted");
    this.setState({ val: newval });
    console.log(this.state.val);
  };

  render() {
    return (
      <div className="ok2">
        <textarea
          className="message"
          ref={(input) => {
            this.textInput = input;
          }}
          type="text"
          placeholder="Write me somthing!. Also, double click to ping:) "
          // value={this.state.val}
        ></textarea>

        <button
          className="button"
          onClick={() => {
            this.magic();
            this.changeval();
            this.handleSubmit(); //animation + //pinging the phone
            // this.handleButtonClick(); //setVal(() => ""); //sets the value of the box to empty
          }}
        ></button>
      </div>
    );
  }
}

export default Pingbutton;

排查思路 #

• 先明确报错本质：React的JSX语法要求DOM元素的类名属性必须使用className，不能使用原生HTML的class属性。react-dom.development.js是React的运行时依赖，它抛出错误仅代表检测到了不合法的DOM属性，错误本身出在业务代码里，不是依赖包的问题。
• 首先排除已提供的Pingbutton.js问题：逐行检查该组件的JSX代码，所有元素均使用了className属性，不存在写class的问题，这个组件不是该警告的来源。
• 全局检索快速定位：在VS Code中打开项目根目录，使用Mac全局搜索快捷键Cmd+Shift+F，搜索关键词class=，搜索时排除node_modules、dist/build等非业务代码目录，筛选.js/.jsx/.tsx后缀的文件，所有命中的JSX代码位置就是潜在错误点。
• 调用栈精确定位：打开浏览器开发者工具的Console面板，点击报错信息左侧的展开箭头，查看完整错误调用栈。调用栈中除了react-dom的内部调用逻辑，一定会出现本地业务文件的名称和对应行号，点击该行号可直接跳转到出错的业务代码位置，定位效率比全局搜索更高。
• 特殊场景排查：如果上述方法没找到错误点，检查项目中是否存在通过字符串拼接直接生成JSX的代码（比如模板字符串里拼接了<div class="xxx">再插入到JSX中），这类写法也会触发该警告。注意：通过dangerouslySetInnerHTML插入的原生HTML、通过原生JSdocument.createElement操作DOM时写的class属于原生HTML范畴，不会触发React的这个警告，不用修改。

修复方案 #

• 找到所有JSX中写了class=属性的位置，全部替换为className=即可，例如将<div class="container">修改为<div className="container">。
• 修复Pingbutton.js的附带错误：该组件的button点击事件中调用了this.magic()方法，但当前组件代码中未定义该方法，运行时会抛出this.magic is not a function的错误，需要补充magic方法的实现，或者删除无效的方法调用。
• 额外优化：Pingbutton.js顶部引入了useState和axios但未使用，可以删除无用导入减少打包体积。

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