React组件仅在函数名小写时更新MathJax公式问题

我的React（^18.2.0）项目包含多个组件，所有组件均使用better-react-mathjax渲染公式与文本。文本更新可在浏览器正常显示，但MathJax公式仅在组件对应的函数名以小写开头时才会更新。

例如SetTheory1.js组件，当函数名从setThor1改为SetThor1时，公式R_{XY}不再更新，而文本“this is a formula”在两种命名下均可正常更新：

import { MathJax, MathJaxContext } from "better-react-mathjax";

const setThor1 = () => {
 
  return (
    <div className="ddd">
      <MathJaxContext>
        <MathJax inline>
        this is a formula \({"R_{XY}"}\)
        </MathJax>
      </MathJaxContext>
    </div>
  );
};

export default setThor1;

我认为组件导出常量的命名只是约定，不应影响渲染更新，特此寻求原因。项目路由配置如下（App.js）：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

//import { MathJax, MathJaxContext } from "better-react-mathjax";
import Header from "./templateComponents/Header";
import Side from "./templateComponents/Side";
import Footer from "./templateComponents/Footer";
import IntroToProbaAndStat from "./Components/Introduction to proba and stat";

import SetThe2 from  "./Components/setTheory2";
import SetTheo1 from  "./Components/SetTheory1";
import RandomExp from "./Components/randomExperiment";
import RandomVar1 from "./Components/randomVariable1";
import RandomVar2 from "./Components/randomVariable2";
import RandomVar3 from "./Components/randomVariable3";
import RandomVar4 from "./Components/randomVariable4";
import ExampleUseEffectC from "./Components/UseEffectExample";

import "./assets/css/StatStyle.css";

function Appk() {
  return (
    <Router>
      <div className="App">
        <Header />
        <Side />
        <Footer />
        <div
          id="sec"
          style={{ backgroundColor: "rgb(245,244,240)" }}
          className="absolute p-4 max-sm:w-[30%] right-0 text-lg top-9 h-[90%] w-[70%] overflow-y-auto"
        >
          <Switch>
            <Route exact path="/IntrToProbaP">
              <IntroToProbaAndStat />
            </Route>

            <Route exact path="/setThe1P">
              <SetTheo1 />
            </Route>

            <Route exact path="/setThe2P">
              <SetThe2 />
            </Route>

 
            <Route exact path="/randomExpP">
              <RandomExp />
            </Route>
            
          
            
            <Route exact path="/randomVarP1">
              <RandomVar1 />
            </Route> 
            <Route exact path="/randomVarP2">
              <RandomVar2 />
            </Route> 
            <Route exact path="/randomVarP3">
              <RandomVar3 />
            </Route> 
            <Route exact path="/randomVarP4">
              <RandomVar4 />
            </Route> 
            
            <Route exact path="/ExampleUseEffect">
              <ExampleUseEffectC />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default Appk;

核心原因 #

React的JSX语法规则中，首字母大写的标识符会被识别为自定义React组件，而首字母小写的会被当作原生HTML标签处理。结合better-react-mathjax的渲染逻辑，出现更新差异的具体原因是：

• 小写开头的组件：React会直接执行函数生成DOM，每次状态更新都会重新生成节点，better-react-mathjax会重新检测并渲染公式。
• 大写开头的组件：React会以组件实例的方式管理，更新时会通过Diff算法对比DOM变化。如果你的公式内容是硬编码的，React可能判定组件无需重新渲染，导致better-react-mathjax没有触发公式更新。

另外，你路由中导入组件的名称和组件文件导出的名称不匹配（比如SetTheory1.js导出setThor1，路由里却导入为SetTheo1），JS是大小写敏感的，这种不匹配可能导致打包工具的缓存或实例复用异常，进一步加剧更新失效问题。

解决办法 #

1. 统一组件命名与导入规范
   所有自定义组件严格使用首字母大写命名（符合React官方规范），同时确保路由中的导入名称和组件导出名称完全一致，避免路径解析和实例复用的问题。

2. 强制触发MathJax更新
   如果公式是动态内容，将其作为state或props传递给MathJax组件，或者通过key属性强制组件重新渲染：

import { useState } from "react";
import { MathJax, MathJaxContext } from "better-react-mathjax";

const SetThor1 = () => {
  const [formula, setFormula] = useState("R_{XY}");
  
  return (
    <div className="ddd">
      <MathJaxContext>
        <MathJax inline key={formula}>
          this is a formula \({formula}\)
        </MathJax>
      </MathJaxContext>
    </div>
  );
};

export default SetThor1;

3. 全局配置MathJaxContext
   将MathJaxContext提升到App组件层级，避免每个组件重复创建上下文，确保MathJax全局实例状态一致：

// App.js修改
import { MathJaxContext } from "better-react-mathjax";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

// 其他导入...

function Appk() {
  return (
    <MathJaxContext>
      <Router>
        <div className="App">
          <Header />
          <Side />
          <Footer />
          {/* 原有路由内容 */}
        </div>
      </Router>
    </MathJaxContext>
  );
}

export default Appk;

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